reactjs - 如何重置 react 组件，包括所有可传递可达的状态？

Question

我偶尔会有一些概念上有状态的 react 组件，我想重置它们。理想的行为相当于删除旧组件并读取新的原始组件。

React 提供了一个方法 setState ，它允许设置组件自己的显式状态，但不包括隐式状态，例如浏览器焦点和表单状态，并且还排除其子组件的状态。捕获所有间接状态可能是一项棘手的任务，我更愿意严格而彻底地解决它，而不是用每一个新的令人惊讶的状态玩打地鼠游戏。

是否有 API 或模式可以执行此操作？

编辑:我做了一个简单的示例，演示了 this.replaceState(this.getInitialState()) 方法，并将其与 this.setState(this .getInitialState()) 方法:jsfiddle - replaceState 更加健壮。

Answer 1

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

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

没有重置单个组件的本地状态的快捷方式。