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

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

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

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

React.js

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

Q&A

1回答

4676閲覧

Reactのコンポーネント間(親子関係ではない)の値の受け渡しについて

R.Type

総合スコア10

TypeScript

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

React.js

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

0グッド

1クリップ

投稿2016/11/01 13:43

編集2022/01/12 10:55

###Reactでのコンポーネント間(親子関係ではない)の値の受け渡しについて
RectReact初心者です。公式のチュートリアルは一通りTypeScriptでやりました。React+Typescriptの環境でスマホアプリを作成しているのですが、コンポーネントから別コンポーネント(親子関係ではない)に値を渡したい時はどのような方法で実装すればいいのでしょうか?

例)

[動物図鑑のページ]

  • <ListContainer /> ←ページの一番外側。ヘッダなど
  • <AnimalList /> ←ボタンの一覧を入れる。<ListContainer>の子
  • <Animal /> ←ボタン。押すと説明ページへ<AnimalList>の子

[詳細のページ]

  • <AnimalInfomation /> ←別ページ。<Animal />で押された動物の詳細な情報を表示する

コード

  • ListContainer.tsx の一部
render(){ return( <div class="ListContainer"> <h2>動物一覧<h2> <AnimalList animalData={jsonData}/> </div> ); }
  • AnimalList の一部
render(){ let animalNodes = this.props.data.map((animal)=>{ return ( <Animal name={animal.name} height={animal.height} weight={animal.weight} /> ); }); return( <div class="AnimalList"> {animalNodes} </div> ); }
  • Animal の一部(ここで押されたボタンの情報(名前・体重・身長)によって別のページに飛ばしたい)
render() { return ( <div className="animal"> <a className="animalName"> {this.props.name} </a> </div> ); }
  • AnimalInformation の一部(ここでどのようにAnimalの情報を持ってくればよいのか分からない)
render() { return( <div className="AnimalInformation"> <h2>押したボタンの動物の名前をここに表示する</h2> <p>押したボタンの動物の体重をここに表示する</p> <p>押したボタンの動物の身長をここに表示する</p> </div> ); }

というような4つのコンポーネントがあったとして、
<Animal>ボタンで押された動物の情報(名前・体重・身長)を<AnimalInformation />に渡すにはどのような方法で実装すればよいのでしょうか?

親子関係ならばPropやStateで値を受け渡しできると思うのですが...
それともこれも親子関係にしてPropで渡せばいいのでしょうか?
実装するためのメソッドや渡し方のコードを教えて頂けると嬉しいです。よろしくお願いします。

#####言語/FW/ツール等のバージョンなど
"react": "^15.3.0"
"typescript": "^1.8.10"
"jsx": "react

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

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

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

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

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

guest

回答1

0

親子関係にはないコンポーネント間の連携について、ReactはReactのみで行うことを想定していません。Reactが提供するのはあくまで親子関係だけだからです。ではどうするのかというと、Reactを開発したFacebookではFluxフレームワークを使うべきとしています。

Fluxはライブラリというよりも考え方、いわば、デザインパターンです。FacebookはFluxのサンプルを提供していますが、それを採用する理由はありません。そこで、Fluxの考えをさらに詰めて、使いやすく、有用なライブラリがいつか作られました。その中で今主流と言われているのがReduxです(他にも多くのライブラリがあります)。Reduxの説明をするだけで長くなってしまいますので省略しますが、検索すると多くの参考になる記事が見つかりますので、参考にしてみてください。

なお、Reduxだけですと同じページでの連携になります。ページ遷移した別ページも含めるとなるとreact-router等のルーティングライブラリと組み合わせる必要があります。reduxとreact-routerの組み合わせなど、こちらも検索すれば色々出てきますので、調べてみてください。

Fluxフレームワーク以外の選択肢はあるのか…というとあることはあります。それはFRPライブラリと組み合わせることです。
参考: Good bye Flux, welcome Bacon/Rx?の翻訳 - Qiita
Reactはもともとimmutableなデータとして扱うことを推奨しており、statelessな関数によるコンポーネント(関数がそのままコンポーネントにできる)を実装するなど、関数型プログラミングと相性が良くなるような構成をしてます。そこで、FRP(関数型リアクティブプログラミング)と組み合わせるという方法です。やり方などは参考の記事を見ていただくといいでしょう。Bacon.jsやRxJSを使ったことがあってFRPに慣れているというのであれば、悪い方法ではないと思います。

投稿2016/11/01 20:53

raccy

総合スコア21733

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問