React で子コンポーネントの state をクリアするには

Question

タイトルどおり、子コンポーネントの state をクリアしたいです。
WebComponents であれば、子要素をクローンして置換すれば、初期状態にできますが、
React では直接 DOM 操作しない考え方なので同じようにはできません。

調べてみると、親コンポーネントで子コンポーネントに使う state で保持し、
props として子要素に渡すという使い方をすればよいというものを目にします。

しかし、クリアしたいイベントが起きるのはほぼルートコンポーネントや、
localStorage, WebSocket など外部起因になり、 state を保持する親というのが、
最上位に近いコンポーネントになります。
そうなると Redux みたいなことになり、基本的にコンポーネント内で完結するのに
クリア機能のためだけに大げさなものになってしまいます。

これをうまく解決する方法はありませんでしょうか？

Answer 1

これをうまく解決する方法はありませんでしょうか？

子コンポーネントにkeyを振っておいて、イベントに合わせてkeyの値を入れ替えれば、その子コンポーネントはゼロから再生成されます。

Comments

[lazex]

できました。ありがとうございます。
key は配列要素で使うものと言うイメージでしたが、それ以外でもつかえるものなのですね。