ReactJs - 列表组件中的嵌套列表组件

Question

你好，我想在列表组件中嵌套列表组件。第一个列表是一个选项组列表，其每个项目都有一个选项列表。我认为问题来自嵌套的IndicatorRow。我无法找到相同的例子。

var IndicatorRow = React.createClass({ 
render: function() { 

    var indicators = []; 

    for (var key in this.props.indicatorsOfGroup) { 
     indicators.push(<option value={key} > {this.props.indicatorsOfGroup[key]}</option>); 
    } 

    return {indicators} ; 
} 
}); 

var IndicatorGroup = React.createClass({ 
render : function(){ 

    var indicatorsGroup = []; 
    for (var key in this.props.indicatorsGroups) { 

     var indicatorsOfGroup = this.props.indicatorsGroups[key].indicators; 

     indicatorsGroup.push( 
     <optgroup label={key}> 
      <IndicatorRow indicatorsOfGroup={indicatorsOfGroup}/> 
     </optgroup>); 

    } 

    return (<select> 
       {indicatorsGroup} 
      </select>); 
} 
}); 

ReactDOM.render(
    <form> 
     <fieldset className="form-group"> 
      <IndicatorGroup indicatorsGroups={indicatorsSelected}/> 
     </fieldset> 
    </form> 
, 
document.getElementById('indicators') 
); 

我的数据结构如下

var indicatorsSelected = { 
"Economy & Growth": { 
    "indicators": { 
     "id1": "Indicator 1", 
     "id2": "Indicator 2" 
    } 
}, 
"Energy & Mining": { 
    "indicators": { 
     "id1": "Indicator 1", 
     "id1": "Indicator 2" 
    } 
}, 
"Environment": { 
    "indicators": { 
     "id1": "Indicator 1", 
     "id2": "Indicator 2" 
    } 
}, 
{...} 
}; 

我希望得到任何帮助

Answer 1

2个问题：

1. 不能从render
2. 您的阵列返回数组每个孩子需要一个key属性

类似：

var IndicatorRow = React.createClass({ 
    render: function() { 
    var indicators = []; 

    for (var key in this.props.indicatorsOfGroup) { 
     indicators.push(<option key={key} value={key} > {this.props.indicatorsOfGroup[key]}</option>); 
    } 

    return (<optgroup label={key}> 
     {indicators} 
    </optgroup>); 
    } 
}); 

var IndicatorGroup = React.createClass({ 
    render: function(){ 
    var indicatorsGroup = []; 
    for (var key in this.props.indicatorsGroups) { 
     var indicatorsOfGroup = this.props.indicatorsGroups[key].indicators; 

     indicatorsGroup.push( 
     <IndicatorRow key={key} indicatorsOfGroup={indicatorsOfGroup}/> 
    ); 

    } 
    return (<form> 
     <fieldset className="form-group"> 
     <select> 
      {indicatorsGroup} 
     </select>    
     </fieldset> 
    </form>); 
    } 

}); 

ReactDOM.render(
<IndicatorGroup indicatorsGroups={indicatorsSelected}/>, 
document.getElementById('indicators') 
);