我想渲染一个 _ 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项。
map
使用Object.keys:
_renderObject(){ return Object.keys(ObjectTest).map(obj, i) => { return ( <div> id is: {ObjectTest[obj].id} ; name is: {ObjectTest[obj].name} </div> ) }) }
使用Object.entries:
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'/>