对孩子递归调用方法做出反应

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;

这段代码只是为了给你一个洞察力。