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

您好，我想在列表组件中嵌套一个列表组件。第一个列表是选项组列表，它的每个项都有一个选项列表。我认为问题来自嵌套指示器箭头。我找不到同样的例子

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')
);

如果有任何帮助，我将不胜感激

2问题：

无法从

render

您的数组子项都需要一个

键

属性

比如：

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')
);

var IndicatorRow=React.createClass({
render:function（）{
var指标=[]；
for（此.props.indicatorsOfGroup中的变量键）{
indicators.push（{this.props.indicatorsOfGroup[key]}）；
}
返回(
{指标}
);
}
});
变量IndicatorGroup=React.createClass({
render:function（）{
var指标组=[]；
for（此.props.indicatorsGroups中的变量键）{
var indicatorsOfGroup=this.props.indicatorsGroups[key].indicators；
指示灯组。按下（
);
}
返回(
{indicatorsGroup}
);
}
});
ReactDOM.render(
,
document.getElementById（'indicators'））
);

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')
);