Javascript 如何在 React 中渲染对象？

How render Object in React?

提问by Voi M?p

I have tried 2 hour to render 1 Object.

我尝试了 2 小时来渲染 1 个Object。

My Object is:

我的对象是：

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

I want render :

我想要渲染：

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

I want to make this object in a functionand is called in renderfunction.

我想在一个函数中创建这个对象并在渲染函数中调用。

Can anyone help me? Thank all in Advance :)

谁能帮我？提前谢谢大家:)

回答by Mayank Shukla

Data is an object so directly we can't use map on that, so use Object.keysor Object.entriesto get the array first, then use mapon that to create ui items.

Data 是一个对象，所以我们不能直接使用 map，所以首先使用Object.keys或Object.entries来获取数组，然后使用map它来创建 ui 项。

Using Object.keys:

使用Object.keys：

_renderObject(){
    return Object.keys(ObjectTest).map(obj, i) => {
        return (
            <div>
                id is: {ObjectTest[obj].id} ;
                name is: {ObjectTest[obj].name}
            </div>
        )
    })
}

Using Object.entries:

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

Check this answer also: How to loop an object in ReactJS?

还要检查这个答案：如何在 ReactJS 中循环一个对象？

回答by Ved

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

回答by vnomvk

In react you can render your wish answer in browser screen by below code

在反应中，您可以通过以下代码在浏览器屏幕中呈现您的愿望答案

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;

回答by M at

I wonder why it seems that almost every one is using Object.keys!

我想知道为什么似乎几乎每个人都在使用 Object.keys！

Object.values(ObjectTest).map((row_, index) =>
    <tr>
    {Object.values(row_).map(item => <td>{item}</td>)}
    </tr>
)}

Sample Data:

样本数据：

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