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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

1回答

147閲覧

異なるルートノードにレンダリングする個別のコンポーネント間で、stateを共有したい

nqf6nbs

総合スコア3

React.js

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

0グッド

0クリップ

投稿2023/06/04 09:03

実現したいこと

Component1をroot1に、Component2をroot2にという形で
2つのコンポーネントをそれぞれ異なるルートノードにレンダリングしたいのですが、
その際Component1の状態をComponent2にも反映させたいです。

前提

create react app を使用しています

発生している問題・エラーメッセージ

Component1の状態をComponent2に反映させるやり方がわかりません。

該当のソースコード

index.tsx

1const root1 = ReactDOM.createRoot( 2 document.getElementById("root1") as HTMLElement 3); 4root1.render( 5 <React.StrictMode> 6 <Component1 /> 7 </React.StrictMode> 8); 9 10const root2 = ReactDOM.createRoot( 11 document.getElementById("root2") as HTMLElement 12); 13root2.render( 14 <React.StrictMode> 15 <Component2 /> 16 </React.StrictMode> 17);

App.tsx

1import { useState } from "react"; 2import { Component1 } from "components/Component1"; 3import { Component2 } from "components/Component2"; 4 5function App() { 6 const [state, setState] = useState("default"); 7 return ( 8 <> 9 <Component1 10 changeState={(v: string) => setState(v)} 11 /> 12 <Component2 option={state} /> 13 </> 14 ); 15} 16export default App; 17

試したこと

上記の様に、祖先でuseStateを用いて子コンポーネントに状態を渡し、
各子コンポーネントを直接呼び出してレンダリングしてみましたが、
index.tsxの<Component2 />にprops.optionを指定せよと言われてしまいだめでした。

ご指南の程お願い致します。

補足情報(FW/ツールのバージョンなど)

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",

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

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

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

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

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

guest

回答1

0

自己解決

createPortal使ったことありませんでした、、
勉強不足で申し訳ありません
コメント頂きありがとうございました!

投稿2023/06/07 01:34

nqf6nbs

総合スコア3

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問