重複子與this.props的父親反應元素

Question

當前我正在創建反應組件，並且我需要重複子組件，基於父組件的this.props.value。 我正在努力尋找任何好的例子。

這裏是我的代碼

變種LiComponent = React.createClass（{

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

}）;

變種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> 
    ); 
} 

}）;

現在，我想根據統計分量的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> 
); 
}