如何在React中渲染对象？

Question

我试了2小时渲染1 对象。

我的对象是：

const ObjectTest = { 
     1: { 
      id : 1, 
      name:'ABC' 
     }, 
     3: { 
      id: 3, 
      name:'DEF' 
     } 
} 

我想渲染：

id is 1 ; name is ABC 
id is 3 ; name is DEF 

我想使这个对象在功能，被称为在渲染功能。

任何人都可以帮助我吗？感谢所有提前:)

Answer 1

数据是一个对象，所以我们直接上不能使用该地图，所以使用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> 
     ) 
    }) 
} 

使用Object.entries：

const ObjectTest = { 
 
    1: { 
 
     id : 1, 
 
     name:'ABC' 
 
    }, 
 
    3: { 
 
     id: 3, 
 
     name:'DEF' 
 
    } 
 
} 
 

 
class App extends React.Component{ 
 

 
\t _renderObject(){ 
 
\t \t return Object.entries(ObjectTest).map(([key, value], i) => { 
 
\t \t \t return (
 
\t \t \t \t <div key={key}> 
 
\t \t \t \t \t id is: {value.id} ; 
 
\t \t \t \t \t name is: {value.name} 
 
\t \t \t \t </div> 
 
\t \t \t) 
 
\t \t }) 
 
\t } 
 

 
\t render(){ 
 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t \t {this._renderObject()} 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 
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'/>

检查这个答案也是：How to loop an object in ReactJS?

Answer 2

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> 
 
    ) 
 
}

Answer 3

在反应，你可以通过下面的代码

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;