我如何重置一个反应组件,包括所有可传递的状态?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (107)

我偶尔会对想要重置的概念状态的组件做出反应。理想的行为将等同于删除旧的组件并读取新的原始组件。

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

有没有API或模式来做到这一点?

我做了一个简单的例子,展示了这种this.replaceState(this.getInitialState())方法,并将其与该this.setState(this.getInitialState())方法进行了对比:https : //jsfiddle.net/emn13/kdrzk6gh/ - replaceState更强大。

提问于
用户回答回答于

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

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

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

用户回答回答于

你应该避免replaceState和使用setState

文档说replaceState“可能会在未来版本的React中完全删除”。我认为它肯定会被删除,因为replaceState它并不真正与React的哲学混为一谈。它有助于使React组件开始感觉有点像瑞士刀。这对于React组件变得越来越小并且更具有目的性的自然增长感到不满。

在React中,如果你不得不在泛化或专业化方面发生错误:瞄准专业化。作为一个推论,组件的状态树应该有一定的简约性(如果你支持品牌崭新的产品,可以高雅地突破这个规则是很好的)。

像这样:

this.setState(this.getInitialState());

此外为了重置“浏览器状态”,需要删除该DOM节点。利用vdom的力量并key为该组件使用新的道具。新的渲染将取代批发组件。

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

扫码关注云+社区

领取腾讯云代金券