0
0
実現したいこと
- 一つの画面で複数のタブ（子コンポーネント）をもつ
- 子コンポーネントのクリックイベントによって、タブを増やす
⇒親コンポーネント側で追加か？
- 非表示になっている開いていないタブについて、値を保持したい。
⇒stateで保持したまま、表示・非表示を切り替えたい
- (追記)各タブの内容は、異なるコンポーネントで定義したい。
前提
- React使用（ほかに良いライブラリがあればご教示願います）
調べてみた感想
- Reduxを使う必要があるか
- jsxの内容をmapで書く場合、非表示中のタブの内容を保持するのが難しい
回答3件
#1
総合スコア146147
投稿2023/10/04 13:54
jsxの内容をmapで書く場合、非表示中のタブの内容を保持することがむずかしい
どのような想定をしているのでしょうか？
データとともに表示・非表示のフラグを持たせておけば、非表示のままデータを保持することも特段の問題はないと考えます。
#3
総合スコア239
投稿2023/10/07 13:43
ご存知であれば恐縮ですが、
ステートがリセットされる条件は「一度レンダーされれなくなる」ことであって、「画面に表示されなくなる」ことではありません。
https://ja.react.dev/learn/preserving-and-resetting-state#state-is-tied-to-a-position-in-the-tree
(レンダーされるけど画面に表示されないってどういう意味だよ？と疑問があれば、https://ja.react.dev/learn/render-and-commit#epilogue-browser-paint を参照)
なので、レンダーしたまま非表示にする方法 (例えば、 display: none を指定するとか)であったり、Suspense を利用する方法もあるようです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。