質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

意見交換

クローズ

3回答

420閲覧

react 動的にタブを増減できる画面を作成したいが実現可能か

nka_2mo

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/10/04 13:50

編集2023/11/07 18:01

0

0

実現したいこと

  • 一つの画面で複数のタブ(子コンポーネント)をもつ
  • 子コンポーネントのクリックイベントによって、タブを増やす

 ⇒親コンポーネント側で追加か?

  • 非表示になっている開いていないタブについて、値を保持したい。

 ⇒stateで保持したまま、表示・非表示を切り替えたい

  • (追記)各タブの内容は、異なるコンポーネントで定義したい。

イメージ説明

前提

  • React使用(ほかに良いライブラリがあればご教示願います)

調べてみた感想

  • Reduxを使う必要があるか
  • jsxの内容をmapで書く場合、非表示中のタブの内容を保持するのが難しい

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

回答3

#1

maisumakun

総合スコア145177

投稿2023/10/04 13:54

jsxの内容をmapで書く場合、非表示中のタブの内容を保持することがむずかしい

どのような想定をしているのでしょうか?

データとともに表示・非表示のフラグを持たせておけば、非表示のままデータを保持することも特段の問題はないと考えます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#2

nka_2mo

総合スコア0

投稿2023/10/05 02:43

#1

タブの内容はそれぞれ異なるコンポーネントとしたいです。
状態管理されている配列の中に異なるコンポーネントが入っていてるのを想定していました、、、

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

#3

honey32

総合スコア158

投稿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 を利用する方法もあるようです。

https://zenn.dev/kobayang/articles/8e06c77cec9359

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問