javascript - 嵌套组件不更新其状态

Question

我在更新树结构中的嵌套组件时遇到一些问题。我创建了以下最小示例来说明问题:Codesandbox.io

为了完整起见，这是嵌套的组件:

class Node extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: props.selected
    };
    this.toggleSelected = this.toggleSelected.bind(this);
  }

  toggleSelected() {
    this.setState({
      selected: !this.state.selected
    });
  }

  render() {
    return (
      <>
        <div onClick={this.toggleSelected}>
          Selected: {this.state.selected ? "T" : "F"}, Depth: {this.props.depth}
        </div>

        {this.props.depth < 5 && (
          <Node selected={this.state.selected} depth={this.props.depth + 1} />
        )}
      </>
    );
  }
}

树中的节点应该可以在单击时选择，我也想(递归地)切换所有子节点中的选定状态。我以为我可以通过将 this.state.selected 通过 props 传递给 child 来做到这一点，不幸的是这似乎不起作用。

子级会被重新渲染，但是使用它们的旧状态(可以理解，因为它们没有通过构造函数重新初始化)。处理这个问题的正确方法是什么？

我也尝试将 key 属性传递给节点以帮助 react 区分元素，但无济于事。

编辑:以下是所需行为的一些示例:

考虑这棵树:

[ ] Foo
    [ ] Foo A
        [ ] Foo A1
        [ ] Foo A2
    [ ] Foo B
        [ ] Foo B1
        [ ] Foo B2

检查“Foo”-Node 时的预期结果:

[x] Foo
    [x] Foo A
        [x] Foo A1
        [x] Foo A2
    [x] Foo B
        [x] Foo B1
        [x] Foo B2

检查“Foo A”-Node 时的预期结果:

[ ] Foo
    [x] Foo A
        [x] Foo A1
        [x] Foo A2
    [ ] Foo B
        [ ] Foo B1
        [ ] Foo B2

任何正确方向的提示/提示都值得赞赏。

Answer 1

您应该像这样使用getDerivedStateFromProps:

    constructor(props) {
       super(props);
       this.state = {
         selected: props.selected,
         propsSelected: props.selected
       };
       this.toggleSelected = this.toggleSelected.bind(this);
    }



    static getDerivedStateFromProps(props, state) {
        if (props.selected !== state.propsSelected)
          return {
            selected: props.selected,
            propsSelected: props.selected
          };
      }

我们总是将 prevProp 存储在状态中。每当我们遇到存储在状态中的属性和来自父级的属性发生更改时，我们都会更新由父级和组件本身控制的状态部分(selected)，并且我们还保留此时的 props 处于用于将来比较的状态。

通常，可以从父组件和自身控制的组件将涉及这种逻辑。大多数 React 组件库中的输入组件就是一个理想的例子。