重复 child 与 this.props 的 parent 反应元素

Question

目前我正在创建 React 组件，我需要重复 child 组件，基于 parent 组件的 this.props.value。我正在努力寻找任何好的例子。

这是我的代码

var LiComponent = React.createClass({

render:function(){
    return(
        <div>
            <span>{this.props.label}</span>
            <span>{this.props.value}</span>
        </div>
    );
}

});

var StatsComponent = React.createClass({

    getInitialState: function(){
    return{
        value: this.props.value || []
    }
},

componentDidMount: function(){
    var data = this.state.value,
        columnName = data[0],
        data = data.slice(1),
        values = data.map(function (o) { return o.value; }),
        labels = data.map(function (o) { return o.label; });
},

shouldComponentUpdate: function(nextProps, nextState){

    var data = nextProps.value,
        labels = data.map(function (o) { return o.label; }),
        values = data.map(function (o) { return o.value; });
    return false;

},
render: function(){
    return (
        <div style={style}>
            <LiComponent>
            </LiComponent>
        </div>
    );
}

});

现在，我想根据 Stats Component 的 this.props.value 重复 LiComponent。我应该怎么做？

Answer 1

您可以将 LiComponents 推入数组，然后渲染它们。

像这样，

render: function(){
var rows = this.props.value.map(function(row) {
    //Add props to your LiComponent just as you would normally. 
    return <LiComponent />;
});
return (
    <div style={style}>
        {rows}
    </div>
);
}

重复 child 与 this.props 的 parent 反应元素

repeating child with this.props of parent react element

javascript

components

parent-child

repeat

reactjs