如何在React.js中循环遍历对象并创建子组件

Question

我是React.js的新手,并且通过子组件得到了卡通循环.我有一个对象,我需要循环它,它应该使用该对象的值创建子组件.先感谢您

var o = {
    playerA: {
        name: 'a',
    },

    playerB: {
        name: 'b',
    }
};


var Players = React.createClass({
    getPlayers: function(){
        return o;
    },    

    render: function() {
        return (
            <div>
                <div className="row"> Players</div>
                {this.getPlayers()}
                <Player /> 
            </div>
        );
    }
});


var Player = React.createClass({    
    render: function(){
        return (
            <div className="row" > player {this.name} < /div>
        )
    }
});

React.render(<Players />, document.getElementById('container'));

---

结果应该是:

球员

球员b

---

我有小提琴设置:http: //jsfiddle.net/rexonms/7f39Ljbj/

Answer 1

首先,您将迭代数据,.map以便您可以为每个项目返回标记(子组件).在子组件标记中,您将在属性中传递该项的数据.

{Object.keys(yourObject).map(function(key) {
  return (
    <ChildComponent data={yourObject[key]}/>
  );
})}

然后,子组件的标记可以通过绑定来使用该数据this.props.data.

<div>Player: {this.props.data.name}</div>

您不必为属性/属性使用名称"data".喜欢的东西info={yourObject[key]}与this.prop.info是一样有效.

在这里工作JS小提琴.