k01ken’s b10g

He110 W0r1d!

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を変更させる方法について書かれています。