无法将React组件推送到另一个React组件中的数组

我正在尝试在ReactJs中执行类似手风琴的操作。现在我有3个分量：<TableList>，<TableListGroupRow>，<TableListRow>无法将React组件推送到另一个React组件中的数组

在列表render方法我推GroupRows和行到一个数组，这是呈现然后。

 //one group row for example 
     var group; 
     tableRows.push(
      group = 
      <TableListGroupRow 
      onClick={this.toggleOpenGrp } /> 
     ); 

     //one row for example 
     var row; 
     tableRows.push(
      row = 
      <TableListRow 
      onClick={this.rowClick2 } /> 
     ); 

     group.children.push(row); 



    return (
       <tbody> 
        {tableRows} 
       </tbody> 
    );

我试图将行链接存储到它们属于的groupRow.children中。通过这个想法，我可以听取对一个groupRow的点击，并将状态设置为隐藏在其“子”属性中的所有行。

但据我所知<TableListGroupRow>不返回一个实例对象与其中的子数组。也许这完全是错误的概念。请让我知道如何做出反应。
谢谢！

来源

2016-06-30 Alexander Virko

我现在在List render（）方法中做一个空对象，它作为道具传递给GroupRow及其所有行。在GroupRow渲染方法中，我将“this”传递给这个空对象。在Row render方法中，我将每个'this'行都推送到this.props.thatEmptyObject.groupRow.state.children [] –

你绝对不需要“店通” ......

此外，您还可以推动组件阵列时不分配（因为分配将返回undefined）。

我想一个更好的办法可能是储存“显示”布尔作为父母的状态的一部分，并有条件地加载基于this.state.display 孩子组件，以便在你的榜样，这将是： `

return (
     <tbody> 
      {this.state.display ? tableRows : null} 
     </tbody> 
);

` （事件处理程序显然需要绑定到一些事件

例：

toggleDisplay() { 
    this.setState({ 
     display: !this.state.display 
    }); 
}

'，并通过道具通过这个事件处理程序给孩子

最后，我不知道是否有帮助，但你可以减少这一个级别的试图刚好路过设置从父级的孩子的模样方法事件处理程序（甚至通过多个级别）。

希望这会有所帮助！

来源

2016-06-30 20:49:05

无法将React组件推送到另一个React组件中的数组

回答

相关问题