更新组件数组中单个 React 子组件的状态？

Question

到目前为止，当单击展开/折叠所有按钮时，我具有展开/折叠所有功能以显示/隐藏标题组件。

Container 组件是最外层的组件，它保持 openAll 状态，作为 props 向下传递给 Text 组件。

如您所见，在 Container 组件的 render 方法中，我返回了一个嵌套有 Button 组件的 div 和一个标题数组（这是一个嵌套有 Toggle 和 Title 组件的 div）。

我最大的问题是点击Toggle组件时如何设置单个Title组件的状态？ Title 和 Toggle 组件都在同一级别上。我尝试使用来自父级（容器组件）的回调，但它对我不起作用。

如果您查看容器内的 onToggle 方法，我将代码注释掉，因为这将一次显示/隐藏所有 Title 组件，而不是单个...这是因为它位于数组中。

Title 组件具有 isOpen 状态，当组件接收到下一个 props 时，它正在由父级的 props（Container 组件 - openAll）设置。

也许是我想多了，做的比看起来的要努力。

初始应用组件：

class App extends React.Component {
  render() {
    return (
      <div>
        <Container text="Text" />
      </div>
    );
  }
}

容器组件：

class Container extends React.Component {
  constructor() {
    super();
    this.state = {
      openAll: true,
    };
    this.onExpandAll = this.onExpandAll.bind(this);
    this.onToggle = this.onToggle.bind(this);
  }
  render(){
    const titles = [];
    for(let i = 0; i < 3; i++){
      titles.push(
        <div key={i}>
          <Toggle text="Toggle" onToggle={this.onToggle} />
          <Title
            onToggle={this.onToggle}
            openAll={this.state.openAll}
            text={this.props.text + ' ' + i} />
        </div>
      );
    }
    return (
      <div>
        <Button text="Expand All" onExpandAll={() => this.onExpandAll(true)}  />
        <Button text="Collapse All" onExpandAll={() => this.onExpandAll(false)} />
        {titles}
      </div>
    );
  }

  onToggle() {
    //this.setState({
      //openAll: true
    //});
  }

  onExpandAll(isAllOpen) {
    this.setState({
      openAll: isAllOpen
    });
  }
}

标题组件：

class Title extends React.Component {
      constructor() {
        super();
        this.state = {
          isOpen: true
        }
      }

      componentWillReceiveProps(nextProps) {
        this.setState({
          isOpen: nextProps.openAll ? true : false
        })
      }

      render(){
        return this.state.isOpen ? <h3 style={{display: "inline-block"}}>{this.props.text}</h3> : null;
      }
    }

切换组件：

class Toggle extends React.Component {
  render(){
    return <button onClick={this.props.onToggle}>{this.props.text}</button>
  }
}

按钮组件：

class Button extends React.Component {
  render(){
    return <button onClick={this.props.onExpandAll}>{this.props.text}</button>
  }
}

HTML 看起来像这样：

Expand All | Collapse All 

Toggle Text 0
Toggle Text 1
Toggle Text 2

感谢您的帮助！

Answer 1

我建议添加另一个组件，该组件包含Title 和Toggle 组件。我们称这个组件为 TitleToggleContainer>

TitleToggleContainer 将负责 isOpen 的状态，并将有条件地相应地渲染子 Title 组件。

Toggle 子组件将在componentWillReceiveProps 内将更改的isOpen 状态独立设置为setState，因此只有其兄弟Title 会受到本地更改的影响到isOpen。

修改Container组件：

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openAll: true,
    };
    this.onExpandAll = this.onExpandAll.bind(this);
    this.onToggle = this.onToggle.bind(this);
  }
  render(){
    const titles = [];
    for(let i = 0; i < 3; i++){
      titles.push(
        <TitleToggleContainer 
          key={i}                       // NOTICE how onToggle is no longer passed in,
          isOpen={this.state.openAll}   // ONLY openAll is passed in as a prop `isOpen`
          text={this.props.text + ' ' + i} 
        /> 
      );
    }
    return (
      <div>
        <Button text="Expand All" onExpandAll={() => this.onExpandAll(true)}  />
        <Button text="Collapse All" onExpandAll={() => this.onExpandAll(false)} />
        {titles}
      </div>
    );
  }

  onToggle() {
    this.setState({    // this is ok to uncomment, 
      openAll: true    // it won't be used in TitleToggleContainer
    });
  }

  onExpandAll(isAllOpen) {
    this.setState({
      openAll: isAllOpen
    });
  }
}

新的TitleToggleContainer类：

class TitleToggleContainer extends React.Component{
  constructor(props){
    super(props);
    this.state = { isOpen: true };
    this.localToggle=::this.localToggle;  // another way to bind a method
  }
  localToggle(){
    this.setState({ isOpen: !this.state.isOpen });
  }
  componentWillReceiveProps(nextProps) {  // you still need this to receive 
    this.setState({                       // prop changes from parent Toggle
      isOpen: nextProps.openAll ? true : false
    });
  }
  render(){
    const titleComponent= this.state.isOpen ? <h3 style={{display: "inline-block"}}>{this.props.text}</h3> : null;
    return (
      <div>
        <Toggle onClick={this.localToggle}/>
        {titleComponent} 
      </div>
    );
  }
}