ReactJS 显示两个带有映射的数组

Question

我有两个数组。两个数组中的第 i 个元素构成一个组件。我想在列表中呈现多个这样的组件。这是代码

var ShowData = React.createClass({
        render:function(){
            var itemNames = this.props.names.map(function(item){
                return <div>{item}</div>;
            });
            var itemDesc = this.props.contents.map(function(description){
                return <p>{description}</p>;
            });

            return(
                <div>
                <h3> {itemNames}</h3>
                <div>{itemDesc}</div>
                </div>
                )

        }

    });

这是我的渲染函数

<ShowData names = {this.state.items} contents = {this.state.desc} />

它显示整个第一个数组，然后显示整个第二个数组。给出了什么？

Answer 1

如果数组有相同的顺序，你可以这样做吗（未测试）。

var ShowData = React.createClass({
    render:function(){
        var self = this;
        var items = this.props.names.map(function(item, key){
            return (<div>
                         <h3>{item}</h3> 
                         <div>{self.props.contents[key]}</div>
                    </div>);
        });
        return(
            <div>
                 {items}
            </div>
            )

    }

});

ReactJS 显示两个带有映射的数组

ReactJS display two arrays with mapping

javascript

reactjs