reactjs - 推移的に到達可能なすべての状態を含む反応コンポーネントをリセットするにはどうすればよいですか?

Question

リセットしたい概念的にステートフルな反応コンポーネントが時々あります。理想的な動作は、古いコンポーネントを削除し、新しい元のコンポーネントを再読み込みすることと同じです。

React はsetState、コンポーネント自体の明示的な状態を設定できるメソッドを提供しますが、ブラウザーのフォーカスやフォームの状態などの暗黙的な状態を除外し、その子の状態も除外します。その間接的な状態をすべて把握するのは難しい作業になる可能性があります。新しい驚くべき状態ごとにモグラたたきをするよりも、厳密かつ完全に解決することをお勧めします。

これを行うための API またはパターンはありますか?

編集:this.replaceState(this.getInitialState())アプローチを示し、アプローチと対比 する簡単な例を作成しましたthis.setState(this.getInitialState()): jsfiddle -replaceStateより堅牢です。

Answer 1

再初期化が必要な要素に属性を追加すると、要素に関連付けられたまたはが変更さkeyれるたびに再読み込みされます。propsstate

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>
  );
}