我想渲染一个Object。
我的对象是：
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
我希望它呈现为：
id is 1 ; name is ABC
id is 3 ; name is DEF
我想在一个函数中创建这个对象并在渲染函数中调用。
数据是一个对象，所以我们不能直接在其上使用 map，所以首先使用Object.keys或Object.entries来获取数组，然后使用map它来创建 ui 项。
使用Object.keys：
_renderObject(){
return Object.keys(ObjectTest).map(obj, i) => {
return (
<div>
id is: {ObjectTest[obj].id} ;
name is: {ObjectTest[obj].name}
</div>
)
})
}
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
class App extends React.Component{
_renderObject(){
return Object.entries(ObjectTest).map(([key, value], i) => {
return (
<div key={key}>
id is: {value.id} ;
name is: {value.name}
</div>
)
})
}
render(){
return(
<div>
{this._renderObject()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>还要检查这个答案：如何在 ReactJS 中循环一个对象？
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
render(){
return (
<div>
Object.keys(ObjectTest).map( (key)=> {
return <div>
<span>"Id is:"{key}<span>
<span>"Name is:"{ObjectTest[key].name}<span>
</div>
})
</div>
)
}在react中，您可以通过以下代码在浏览器屏幕中呈现您的愿望答案
import React from 'react';
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
class App extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div>
{
Object.keys(ObjectTest).map((value,index)=>{
<p>id is {ObjectTest[value].id} ; name is {ObjectTest[value].name}</p>
});
}
</div>
);
}
}
export default App;
我想知道为什么似乎几乎每个人都在使用 Object.keys！
Object.values(ObjectTest).map((row_, index) =>
<tr>
{Object.values(row_).map(item => <td>{item}</td>)}
</tr>
)}样本数据：
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}