###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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。