如何在React中渲染对象? [英] How to render a Object in React?

问题描述

我要呈现一个 Object .

我的对象是:

  const ObjectTest = {1:{编号:1，名称:'ABC'}，3:{id:3，名称:'DEF'}} 

我希望它呈现为:

  id为1;名字叫ABCid是3;名字是DEF 

我想在 函数 中创建该对象，并在 render 函数中调用它.

解决方案

数据是一个对象，因此我们不能直接在其上使用地图，因此请使用 Object.keys :

  _renderObject(){return Object.keys(ObjectTest).map(obj，i)=>{返回 (< div>id是:{ObjectTest [obj] .id};名称是:{ObjectTest [obj] .name}</div>)})} 

使用 Object.entries :

  const ObjectTest = {1:{编号:1，名称:'ABC'}，3:{id:3，名称:'DEF'}}App类扩展了React.Component {_renderObject(){return Object.entries(ObjectTest).map(([[key，value]，i)=> {返回 (< div键= {键}>id是:{value.id}；名称是:{value.name}</div>)})}使成为(){返回(< 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中循环对象?

I want to render a Object .

My Object is:

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

I want it to render as:

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

I want to make this object in a function and is called in render function.

解决方案

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

Using 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:

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?

这篇关于如何在React中渲染对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！