아이들에게 재귀 적으로 호출하는 메소드

Question

React를 사용하여 접을 수있는리스트를 만들고 있습니다. 지금까지는 작동하지만 이제 모든 것을 확장/축소하는 버튼을 구현하려고합니다. 따라서 버튼은 모든 요소의 상태를 조정해야합니다. 그래도이 문제를 해결하는 가장 좋은 방법은 무엇인지 모르겠습니다. 이것은 내가 가지고있는 것입니다 :

import React, {Component} from 'react'; 

class CollapsibleList extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      collapsed: true 
     }; 
     this.subLists = []; 
     this.papers = []; 
     if (this.props.subtitles) { 
      for (let subList of this.props.subtitles) { 
       this.subLists.push(
        <CollapsibleList level={this.props.level + 1} subtitles={subList.subtitles} title={subList.title}/> 
       ); 
      } 
     } 
     this.toggleCollapse = this.toggleCollapse.bind(this); 
     this.expandAll = this.expandAll.bind(this); 
     this.collapseAll = this.collapseAll.bind(this); 
    } 

    expandAll() { 
     this.setState({collapsed: false}); 
     this.subLists.forEach(subList => subList.expandAll()); 
    } 

    collapseAll() { 
     this.setState({collapsed: true}); 
     this.subLists.forEach(subList => subList.collapseAll()); 
    } 

    toggleCollapse() { 
     this.setState(prevState => { 
      return {collapsed: !prevState.collapsed}; 
     }); 
    } 

    render() { 
     return (this.state.collapsed ? 
       <li className={'collapsibleListItem'}> 
        <div onClick={this.toggleCollapse}> 
         {this.props.title} 
        </div> 
        <img title={'Expand all'} className={'icon'} alt={'Expand all'} src={require('../expand_all.png')} onClick={this.expandAll}/> 
        <img title={'Collapse all'} className={'icon'} alt={'Collapse all'} src={require('../collapse_all.png')} onClick={this.collapseAll}/> 
       </li> : 
       <li className={'collapsibleListItem'}> 
        <div onClick={this.toggleCollapse}> 
         {this.props.title} 
        </div> 
        <img title={'Expand all'} className={'icon'} alt={'Expand all'} src={require('../expand_all.png')} onClick={this.expandAll}/> 
        <img title={'Collapse all'} className={'icon'} alt={'Collapse all'} src={require('../collapse_all.png')} onClick={this.collapseAll}/> 
        <ul className={'collapsibleList'}> 
         {this.subLists} 
        </ul> 
       </li> 
     ); 
    } 
} 

export default CollapsibleList; 

불행히도, 그것은 작동하지 않는 것 같습니다.

Answer 1

코드에서 수행하려는 작업을 이해할 수 없지만 2 가지 구성 요소가 있어야합니다. 하나는 목록 용이고 다른 하나는 목록 항목 용입니다. 그 결과는 아래와 같습니다 :

// Parent component 
import React from 'react'; 
import ListItem from './ListItem'; 

class List extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     collapsed: false 
    } 
    } 

    render() { 
    const data = ['abc', 'def', 'ghi']; // whatever you want to have 

    return(
     <div> 
     <button onClick={() => this.setState({collapsed: !this.state.collapsed})}> 
      Collapse 
     </button> 
     <ul> 
      { 
      this.state.collapsed && 
      data.map((val, key) => { 
       return(
       <li> 
        <ListItem value={val} key={key} /> 
       </li> 
      ) 
      }) 
      } 
     </ul> 
     </div> 
    ) 
    } 
} 

을 그리고 이것은이 코드는 당신에게 통찰력을 제공하기 위해 그냥 아이 컴퍼넌트

// child component 
import React from 'react'; 

class ListItem extends React.Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return(
     <div> 
     {/*// render anything you want*/} 
     <p>{this.props.value}</p> 
     </div> 
    ) 
    } 
} 

export default ListItem; 

입니다.