对儿童的React递归调用方法

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; 

此代码是只给你一个洞察。