Reactで親コンポーネントから子コンポーネントへstateを渡す
親コンポーネントのstateの状態に応じて、子コンポーネントの状態を切り替えたいと思います。
今回はサンプルプログラムとして、clickボタンを押すたびに、ONとOFFの表示が交互に切り替わるプログラムを書いてみたいと思います。
親コンポーネントのstateの状態が変化するたびに、子コンポーネントの内容も切り替わっています。
import React from 'react'; import {render} from 'react-dom'; import Child from './Child'; class Parent extends React.Component{ constructor(props){ super(props); this.state = { flug: false; }; } handleClick(){ let state = this.state.flug; this.setState({flug: !state}); } render(){ return( <div> <Child isClicked={this.state.flug} /> <button onClick={() => this.handleClick} >click</button> </div> ); } } render( <Parent />, document.getElementById("root") );
import React from 'react'; class Child extends React.Component{ constructor(props){ super(props); } render(){ if(this.props.isClicked === true){ return(<div>ON</div>); }else{ return(<div>OFF</div>); } } } export default Child;
参考リンク
Reactで親から子へstate/メソッドをpropsで渡す時の考え方 - shibe23のはてなブログ
[react]子のコンポーネントから親のstateを変更する方法 - Qiita
逆に子コンポーネントから親コンポーネントのstateを変更させる方法について書かれています。