如何重置包括所有传递可到达状态的反应组件？

reactjs React.js

达蒙小胖

2020-03-12

我偶尔会有一些react组件，这些组件在概念上是有状态的，需要重置。理想的行为将等同于删除旧组件并读取新的原始组件。

React提供了一种方法setState，该方法允许将组件设置为自己的显式状态，但不包括隐式状态（例如浏览器焦点和表单状态），并且还排除其子级状态。捕获所有这些间接状态可能是一项艰巨的任务，我宁愿严格而彻底地解决它，而不是在每一个令人惊讶的新状态下打个-子。

是否有API或模式可以做到这一点？

编辑： 我做了一个简单的例子证明了this.replaceState(this.getInitialState())方法并与对比它this.setState(this.getInitialState())的方法：的jsfiddle - replaceState更强劲。

第1298篇《如何重置包括所有传递可到达状态的反应组件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
路易Stafan 2020.03.12

在key您需要重新初始化的元素上添加一个属性，将在每次元素更改props或state与元素更改关联时重新加载该属性。

key = {new Date（）。getTime（）}

这是一个例子：

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}
Pro小卤蛋 2020.03.12

为了确保您提到的隐式浏览器状态和子级状态被重置，您可以向；返回的根级组件添加key属性render。当它更改时，该组件将被丢弃并从头开始创建。

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

没有重置单个组件的本地状态的捷径。

阳光达蒙达蒙 2020.03.12

您实际上应该避免replaceState使用它setState。

文档说replaceState“可能会在React的未来版本中完全删除”。我认为它肯定会被删除，因为replaceState它并不真正与React的哲学息息相关。它有助于使React组件开始有点瑞士式的感觉。这阻碍了React组件变得越来越小，越来越有针对性地自然增长。

在React中，如果您必须对泛化或专业化有所误解：请寻求专业化。因此，组件的状态树应该具有一定的简约性（如果您要推广具有品牌影响力的新产品，则可以很好地打破此规则）。

无论如何，这就是您的做法。与上述Ben（已接受）的答案类似，但是像这样：

this.setState(this.getInitialState());

同样（如Ben所说），为了重置“浏览器状态”，您需要删除该DOM节点。利用vdom的力量，并key为该组件使用新的道具。新的渲染器将替换该组件。

参考：https : //facebook.github.io/react/docs/component-api.html#replacestate

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android