reactjs - 如何保留 "just hidden"组件的状态

Question

通过my previous question我了解到 React 会自动保留子组件的状态，这就是为什么 its documentation says :

What Shouldn't Go in State?

React components: Build them in render() based on underlying props and state.

现在我的问题是如何对我们刚刚隐藏的组件执行相同的操作？

考虑一个在迭代中不会显示的子组件，同时我们希望保留它的状态以备将来返回时使用!

为了说明我的确切意思，我设计了一个案例场景来向您展示。在下面的代码中，您可以添加有状态的子组件。每个组件都有一个复选框，因此您可以标记它们。最后，第三个按钮将隐藏 未标记的子组件。我正在寻找一种方法来恢复未标记组件的状态，一旦它们被带回。

Executable code

class BlackBox extends React.Component
{
  constructor() {
    super();
    this.state = {
      checked: false,
      counter: 0,
    };
  }

  increment = () => {
    this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
  };

  switch = () => {
    this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
  };

  isChecked() {
      return this.state.checked;
  }

  render() {
    return (
      <span onClick={this.increment} title={this.props.id} style={{
        fontSize: '24pt',
        border: '1px solid black',
        margin: 10,
        padding: 10,
      }}>
        <input type="checkbox" onChange={this.switch} checked={this.state.checked} />
        {this.state.counter}
      </span>
    );
  }
}

class RedBox extends React.Component
{
  constructor() {
    super();
    this.state = {
      checked: false,
      counter: 0
    };
  }

  increment = () => {
    this.setState(Object.assign({}, this.state, { counter: this.state.counter+1 }));
  };

  switch = () => {
    this.setState(Object.assign({}, this.state, { checked: !this.state.checked }));
  };

  isChecked() {
      return this.state.checked;
  }

  render() {
    return (
      <span onClick={this.increment} title={this.props.id} style={{
        fontSize: '24pt',
        border: '1px solid red',
        margin: 10,
        padding: 10,
      }}>
        <input type="checkbox" onChange={this.switch} checked={this.state.checked} />
        {this.state.counter}
      </span>
    );
  }
}

class Parent extends React.Component {
    static blackCount = 0;
    static redCount = 0;
    state = {
      childCmps: [],
      showOnlyChecked: false,
    };
    constructor(props, context) {
      super(props, context);
    }

    addBlackBox = () => {
      this.setState(Object.assign({}, this.state, {
        childCmps: [...this.state.childCmps, { Component: BlackBox,  id: "black" + (++Parent.blackCount) }],
      }));
    };

    addRedBox = () => {
      this.setState(Object.assign({}, this.state, {
        childCmps: [...this.state.childCmps, { Component: RedBox, id: "red" + (++Parent.redCount) }],
      }));
    };

    showHide = () => {
      this.setState(Object.assign({}, this.state, {
        showOnlyChecked: !this.state.showOnlyChecked,
      }));
    };

    render() {
      let children = this.state.childCmps.map(child => <child.Component key={child.id} id={child.id} ref={child.id} />);
      return (
        <div>
          <button onClick={this.addBlackBox}>Add Black Box</button> 
          <button onClick={this.addRedBox}>Add Red Box</button>
          <button onClick={this.showHide}>Show / Hide Unchecked</button>
          <br /><br />
          {children.filter(box => !this.state.showOnlyChecked || this.refs[box.props.id].isChecked())}
        </div>
      );
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById("root")
);

Answer 1

简短的回答:

没有只有优点没有缺点的解决方案(在现实生活中以及您的问题中)。
你真的只有 3 个选择:

1. 使用父状态并管理您的数据(在父组件和/或存储中)
2. 使用子状态并隐藏您不需要的子状态(因此找到另一个动画解决方案)
3. 使用子状态并接受未重新渲染的子状态丢失的状态 -

您可能想查看 redux 以了解如何使用商店。

长答案

如果你愿意

• 从 DOM 中移除一个子元素(例如，为了 ReactCSSTransitionGroup 的动画目的)
• 并保留托运/未托运和柜台信息

那么你不能将其保持在子状态。状态根据定义绑定(bind)到组件的生命周期。如果它从 DOM 中删除(= 未安装)，那么您将丢失所有状态信息。

所以如果你想保存这个信息，你必须将这个信息移动到父组件的状态(对于每个子组件显然)。

你可以找到一个working codepen here .

关于这段代码的一些其他说明:

• 您的 child <...Box>组件现在变成纯 = 无状态组件
• 子组件调用父组件的方法，以更新检查状态或计数器增量。在这些方法中，他们传递自己的 ID
• 最好不要将整个组件存储在状态中，而只存储决定组件的 Prop 。
• 所以新的父状态包含一个对象数组，每个对象都有相关的 Prop 数据
• 在父级渲染中:最好先过滤组件，然后再创建要渲染的组件数组
• 在 parent 中，您需要新方法(onCheck() 和 onClick())来更新数组中特定对象的状态。需要一些特殊的摆弄以确保我们不会在这里直接改变状态。
• setState() , 你不需要做 Object.assign()并再次通过所有状态。如果您提供的对象仅包含已更改的参数，React 将保持其他参数不变。