如何在React中渲染对象？

小编典典

如何在React中渲染对象？

reactjs

我想渲染一个 _ Object_ 。

我的对象是：

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

我希望它呈现为：

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

我想在 _ 函数中 创建此对象，并在 _ 渲染 函数中调用它。

阅读 1107

2020-07-22

共1个答案

小编典典

数据是一个对象，因此我们不能直接在其上使用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'/>

2020-07-22