如何在React中渲染Object？

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 items。

使用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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

也请检查此答案：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;

Answer 4

我想知道为什么似乎几乎每个人都在使用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'
        }
}