React 구성 요소를 다른 React 구성 요소의 배열로 푸시 할 수 없습니다.

Question

ReactJ에서 아코디언과 같은 작업을하려고합니다. <TableList>, <TableListGroupRow>, <TableListRow>

목록에서 것은 그때 렌더링 배열에 GroupRows 및 행을 밀어 방법을 렌더링 : 은 지금은 3 개 구성 요소가 있습니다.

 //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를 클릭하고 상태를 'children'속성의 모든 행에 대해 숨김으로 설정할 수 있습니다.

그러나 내가 배운대로 <TableListGroupRow>은 자식 배열이있는 인스턴스 개체를 반환하지 않습니다. 어쩌면 그것은 완전히 잘못된 개념 일 것입니다. 그런 일이 어떻게 반응하는지 알려주세요.
감사합니다. 당신은 확실히 "저장 링크 '할 필요가 없습니다

Answer 1

... 또한

, 당신은 할당 (할당이 정의되지 않은 반환하기 때문에)없이 배열에 구성 요소를 설치 할 수 있습니다.

나는 그래서 예를 들어이 될 것이라고 더 나은 방법이 될 this.state.display 에 따라 아이들의 구성 요소를로드 조건부 부모의 상태의 일환으로 '디스플레이'부울을 저장하고 있다고 생각 : `

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

` (이벤트 핸들러는 분명히 어떤 이벤트에 바인딩해야합니다

예 :.

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

`및이 이벤트 핸들러를 소품을 통해 어린이에게 전달하십시오.

마지막으로, 도움이되는지 모르겠지만 부모 레벨에서 어린이 모양을 설정하려는이 한 단계 접근 방식을 줄일 수 있습니다. 이벤트 처리기 (심지어 여러 수준을 통해).

희망이 도움이됩니다.