如何在React中渲染对象？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想渲染一个 _ _ 。

我的对象是：

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

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

以上是 如何在React中渲染对象？ 的全部内容， 来源链接： utcz.com/qa/431262.html

回到顶部