blocks|key|164648|text|为了确保您提到的隐式浏览器状态和子组件的状态被重置，您可以向render返回的根级组件添加一个key+attribute；当它发生更改时，该组件将被丢弃并从头开始创建。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|164649|render:+function()+{
++++//+...
++++return+<div+key={uniqueId}>
++++++++{children}
++++</div>;
}|code-block|syntax|javascript|164650|没有快捷方式可以重置单个组件的本地状态。|164651|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/lists-and-keys.html#keys^0|U|6|1B|3|1B|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>To ensure that the implicit browser state you mention and state of children is reset, you can add a <a href="https://reactjs.org/docs/lists-and-keys.html#keys" rel="noreferrer"><code>key</code> attribute</a> to the root-level component returned by <code>render</code>; when it changes, that component will be thrown away and created from scratch.</p>

<pre><code>render: function() {
    // ...
    return &lt;div key={uniqueId}&gt;
        {children}
    &lt;/div&gt;;
}
</code></pre>

<p>There's no shortcut to reset the individual component's local state.</p>


blocks|key|2968283|text|实际上，您应该避免使用replaceState，而应该使用setState。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2968284|文档说，replaceState“可能会在React的未来版本中被完全删除”。我认为它肯定会被删除，因为replaceState并不真正符合React的哲学。它有助于使React组件开始感觉像瑞士刀一样。这不利于React组件的自然增长，使其变得更小，更有针对性。|2968285|在React中，如果你不得不在泛化或专门化上犯错误:目标是专门化。作为推论，组件的状态树应该具有一定的简洁性(但是，如果您正在搭建一个全新的新产品，那么打破这一规则是很有品味的)。|2968286|不管怎么说，这就是你要做的。与上面Ben的(接受的)答案类似，但如下所示：|2968287|this.setState(this.getInitialState());|code-block|syntax|javascript|2968288|另外(就像Ben也说过的)为了重置“浏览器状态”，你需要删除那个DOM节点。利用vdom的强大功能，为该组件使用新的key道具。新呈现器将批量替换该组件。|2968289|参考：https://facebook.github.io/react/docs/component-api.html#replacestate|2968290|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/component-api.html#replacestate^0|B|C|T|8|0|4|C|1G|C|0|0|0|0|1M|3|0|3|1X|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1D|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|U|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>You should actually avoid <code>replaceState</code> and use <code>setState</code> instead.</p>

<p>The docs say that <code>replaceState</code> "may be removed entirely in a future version of React." I think it will most definitely be removed because <code>replaceState</code> doesn't really jive with the philosophy of React. It facilitates making a React component begin to feel kinda swiss knife-y.
This grates against the natural growth of a React component of becoming smaller, and more purpose-made.</p>

<p>In React, if you have to err on generalization or specialization: aim for specialization. As a corollary, the state tree for your component should have a certain parsimony (it's fine to tastefully break this rule if you're scaffolding out a brand-spanking new product though).</p>

<p>Anyway this is how you do it. Similar to Ben's (accepted) answer above, but like this:</p>

<pre><code>this.setState(this.getInitialState());
</code></pre>

<p>Also (like Ben also said) in order to reset the "browser state" you need to remove that DOM node. Harness the power of the vdom and use a new <code>key</code> prop for that component. The new render will replace that component wholesale.</p>

<p>Reference: <a href="https://facebook.github.io/react/docs/component-api.html#replacestate">https://facebook.github.io/react/docs/component-api.html#replacestate</a></p>


blocks|key|2755800|text|向需要重新初始化的元素添加key属性，将在每次与该元素关联的props或state更改时重新加载它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2755801|新日期{+|2755802|+key=().getTime()}|blockquote|2755803|2755804|2755805|下面是一个示例：|2755806|render()+{
++const+items+=+(this.props.resources)+%7C%7C+[];
++const+totalNumberOfItems+=+(this.props.resources.noOfItems)+%7C%7C+0;

++return+(
++++<div+className="items-container">
++++++<PaginationContainer
++++++++key={new+Date().getTime()}
++++++++totalNumberOfItems={totalNumberOfItems}
++++++++items={items}
++++++++onPageChange={this.onPageChange}
++++++/>
++++</div>
++);
}|code-block|syntax|javascript|2755807|entityMap^0|D|3|U|5|10|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|17|8|@]|D|@]|E|$R|S]]|$1|T|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|U|$]]

<p>Adding a <code>key</code> attribute to the element that you need to reinitialize, will reload it every time the <code>props</code> or <code>state</code> associate to the element change.</p>

<blockquote>
  <p>key={new Date().getTime()}</p>
</blockquote>

<p>Here is an example:</p>

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

  return (
    &lt;div className="items-container"&gt;
      &lt;PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      /&gt;
    &lt;/div&gt;
  );
}
</code></pre>


blocks|key|160842|text|将key属性添加到元素并从父级控制其值的方法可以正常工作。下面是一个如何使用组件重置自身的示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|160843|键是在父元素中控制的，但是更新键的函数是作为道具传递给main元素的。这样，重置表单的按钮可以驻留在表单组件本身中。|160844|const+InnerForm+=+(props)+=>+{
++const+{+resetForm+}+=+props;
++const+[value,+setValue]+=+useState('initialValue');

++return+(
++++<>
++++++Value:+{value}
++++++<button+onClick={()+=>+{+setValue('newValue');+}}>
++++++++Change+Value
++++++</button>
++++++<button+onClick={resetForm}>
++++++++Reset+Form
++++++</button>
++++</>
++);
};

export+const+App+=+(props)+=>+{
++const+[resetHeuristicKey,+setResetHeuristicKey]+=+useState(false);
++const+resetForm+=+()+=>+setResetHeuristicKey(!resetHeuristicKey);
++return+(
++++<>
++++++<h1>Form</h1>
++++++<InnerForm+key={resetHeuristicKey}+resetForm={resetForm}+/>
++++</>
++);
};|code-block|syntax|javascript|160845|entityMap^0|1|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>The approach where you add a <code>key</code> property to the element and control its value from the parent works correctly. Here is an example of how you use a component to reset itself.</p>
<p>The key is controlled in the parent element, but the function that updates the key is passed as a prop to the main element. That way, the button that resets a form can reside in the form component itself.</p>
<pre class="lang-js prettyprint-override"><code>const InnerForm = (props) =&gt; {
  const { resetForm } = props;
  const [value, setValue] = useState('initialValue');

  return (
    &lt;&gt;
      Value: {value}
      &lt;button onClick={() =&gt; { setValue('newValue'); }}&gt;
        Change Value
      &lt;/button&gt;
      &lt;button onClick={resetForm}&gt;
        Reset Form
      &lt;/button&gt;
    &lt;/&gt;
  );
};

export const App = (props) =&gt; {
  const [resetHeuristicKey, setResetHeuristicKey] = useState(false);
  const resetForm = () =&gt; setResetHeuristicKey(!resetHeuristicKey);
  return (
    &lt;&gt;
      &lt;h1&gt;Form&lt;/h1&gt;
      &lt;InnerForm key={resetHeuristicKey} resetForm={resetForm} /&gt;
    &lt;/&gt;
  );
};
</code></pre>


<p>I occasionally have react components that are conceptually stateful which I want to reset.  The ideal behavior would be equivalent to removing the old component and readding a new, pristine component.</p>

<p>React provides a method <code>setState</code> which allows setting the components own explicit state, but that excludes implicit state such as browser focus and form state, and it also excludes the state of its children.  Catching all that indirect state can be a tricky task, and I'd prefer to solve it rigorously and completely rather that playing whack-a-mole with every new bit of surprising state.</p>

<p>Is there an API or pattern to do this?</p>

<p><strong>Edit:</strong>  I made a trivial example demonstrating the <code>this.replaceState(this.getInitialState())</code> approach and contrasting it with the <code>this.setState(this.getInitialState())</code> approach: <a href="https://jsfiddle.net/emn13/kdrzk6gh/" rel="noreferrer">jsfiddle</a> - <code>replaceState</code> is more robust.</p>


How can I reset a react component including all transitively reachable state?

我偶尔会有一些react组件在概念上是有状态的，我想要重置这些组件。理想的行为相当于删除旧组件并读取新的原始组件。React提供了一个方法setState，它允许设置组件自己的显式状态，但它排除了隐式状态，如浏览器焦点和窗体状态，它还排除了其子组件的状态。捕获所有的间接状态可能是一项棘手的任务，我更愿意严格而彻底地解决...

问如何重置包含所有可传递可达状态的react组件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置包含所有可传递可达状态的react组件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置包含所有可传递可达状态的react组件？
EN