ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

Reactでコンポーネントが更新された際にDOMの更新をかけたい

Reactでpropsに変更があった際にDOMの更新も行いたい。

例えば、親からもらったpropsに変更があった時、ajaxでリクエストをかけてその結果をもとにDOMの更新を行いたい場合など。

そんなことに直面した場合は、componentDidUpdateメソッドを使えば解決するようだ。

class Hoge extends React.Component {
  constructor(props) {
    this.state = {
      hoge:1
    }
  }
  render(){
    <Foo value={this.state.hoge}></Foo>
  }
}

class Foo extends React.Component {
  constructor(props) {
    this.state = {
      bar: 'hello'
    }
  }

  //Hogeコンポーネントのhogeに変更があった場合に呼ばれる
  componentDidMount(prevProps, prevState, snapshot) {
    if(prevProps.hoge !== this.props.hoge){
      this.setState({
        bar: 'Good Bye'
      });
    }
  }

  render(){
    <div>{this.props.hoge}<br>{this.state.bar}</div>
  }
}

propsに変更があった際にDOMに更新かけたい場合にこのやり方を覚えておきたい。