如何在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'));

---

结果应该是：

选手 a

选手 b

---

我已经在这个网址上设置了一个示例： http://jsfiddle.net/rexonms/7f39Ljbj/

- rex

---

请查看 https://facebook.github.io/react/docs/tutorial.html，“连接数据模型”。 - Felix Kling

Answer 1

首先，您将使用.map迭代数据，以便可以为每个项目返回标记（子组件）。在子组件标记中，您将通过属性传递该项的数据。

{Object.keys(yourObject).map(function(key) {
  return (
    // Add a key to the list item, it is mandatory from react
    // What the key consists of if it's the id or not is up to you
    // it needs to be unique though
    <ChildComponent key={key} data={yourObject[key]}/>
  );
})}

子组件的标记语言可以通过绑定 this.props.data 来使用数据。

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

您不必为属性/属性使用名称“data”。例如info={yourObject[key]}与this.prop.info同样有效。 这里有一个可用的 JS Fiddle。

- m59