Javascript 使用父元素的this.props重复子元素

Javascript 使用父元素的this.props重复子元素,javascript,components,reactjs,parent-child,repeat,Javascript,Components,Reactjs,Parent Child,Repeat,目前我正在创建react组件,我需要根据父组件的this.props.value重复子组件。 我正在努力寻找任何好的例子 这是我的密码 var LiComponent=React.createClass({ render:function(){ 返回( {this.props.label} {this.props.value} ); } })) var statcomponent=React.createClass({ getInitialState:function(){ 返回{ 值:thi

目前我正在创建react组件,我需要根据父组件的this.props.value重复子组件。 我正在努力寻找任何好的例子

这是我的密码

var LiComponent=React.createClass({

render:function(){
返回(
{this.props.label}
{this.props.value}
);
}
}))

var statcomponent=React.createClass({

getInitialState:function(){
返回{
值:this.props.value | |[]
}
},
componentDidMount:function(){
var数据=this.state.value,
columnName=数据[0],
数据=数据片(1),
values=data.map(函数(o){return o.value;}),
labels=data.map(函数(o){return o.label;});
},
shouldComponentUpdate:函数(nextProps,nextState){
var data=nextrops.value,
labels=data.map(函数(o){return o.label;}),
values=data.map(函数(o){returno.value;});
返回false;
},
render:function(){
返回(
);
}
}))


现在,我想根据Stats组件的this.props.value重复LiComponent。我应该怎么做呢?

您可以将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>
);
}
render:function(){
var rows=this.props.value.map(函数(行){
//像平常一样给你的LiComponent添加道具。
返回;
});
返回(
{rows}
);
}
    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>
    );
}
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>
);
}