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

ReactJs - nested list component inside list component

本文关键字：列表 组件 嵌套 ReactJs      更新时间：2023-09-26

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

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"
    }
},
{...}
};

我将不胜感激任何帮助

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')
);
相关文章：