[解決済み] リアクトコンポーネントの状態をリセットするには？

質問

コンセプト的にステートフルなリアクトコンポーネントをリセットしたいことがあります。 理想的な動作は、古いコンポーネントを削除して、新しい、原始的なコンポーネントを読み込むことと同等です。

Reactはメソッドを提供しています。 setState というメソッドがあり、コンポーネント自身の明示的な状態を設定できますが、ブラウザのフォーカスやフォームの状態などの暗黙的な状態は除外され、子の状態も除外されます。 間接的な状態をすべてキャッチするのは厄介な作業で、私は、驚くべき状態の新しいビットごとにモグラたたきをするよりも、厳密かつ完全にそれを解決することを好みます。

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

編集してください。 を実演するつまらない例を作りました。 this.replaceState(this.getInitialState()) アプローチと対照的に this.setState(this.getInitialState()) のアプローチと対照的です。 jsfiddle - replaceState の方がより堅牢です。

どのように解決するのですか？

あなたが言及した暗黙のブラウザの状態や子供の状態がリセットされるようにするためには、ブラウザに key 属性 で返されるルートレベルのコンポーネントに render によって返されるルートレベルのコンポーネントです。それが変更されると、そのコンポーネントは捨てられ、ゼロから作成されます。

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

個々のコンポーネントのローカルな状態をリセットするためのショートカットはありません。