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>

您不必使用名称＆＃34;数据＆＃34;属性/属性。 info={yourObject[key]}与this.prop.info之类的内容同样有效。

Working JS Fiddle here.

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

1 个答案: