Reactで親から子へstate/メソッドをpropsで渡す時の考え方

JavaScript

時々忘れる時があるのでメモ。 propsを子コンポーネントに渡す際の対応関係は下記となります。

render() {
  return(
    <Child
       [子コンポーネントで使用するstate名（A）] = {親コンポーネント内のstate}
       [子コンポーネントで使用するメソッド名（B）] = {親コンポーネント内のメソッド}
    />
  )
}

// 子コンポーネント
import React, { Component } from 'react';

class Modal extends Component {
  
  constructor(props){
    super(props)
  }

  render() {
    return (
        { this.props.[親で指定したstate名(A)] }
         <button onClick={ () => this.props.[親で指定したメソッド名(B)]() }>hoge</button>
    );
  }
}

実際の例に当てはめると、

// 親コンポーネント
import React, { Component } from 'react';
import Modal from'./components/modal.js';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isActiveModal: false,
    }
  }

  onClickModal(){
    this.setState({
      isActiveModal: !this.state.isActiveModal
    });
  }

  render() {
    return (
    <div className="section">
      <Modal 
       isActiveModal={ this.state.isActiveModal }
       onClickModal={ () => this.onClickModal() }
      />
    </div>
    );
  }
}

この場合、

  • （親）this.state.isActiveModalを、（子）isActiveModalという名前で子コンポーネントに渡す
  • （親）{() => this.onClickModal}を、（子）onClickModal()という名前で子コンポーネントに渡す

となります。

// 子コンポーネント
import React, { Component } from 'react';

class Modal extends Component {
  
  constructor(props){
    super(props)
  }

  render() {
    return (
      <div>
        <div className="content has-text-centered">
          <button className="button is-text" onClick={() => this.props.onClickModal()}>Click!</button>
        </div>

        <div className={'modal ' + (this.props.isActiveModal ? 'is-active' : '')}>
          <div className="modal-background" onClick={() => this.props.onClickModal()}></div>
          <p>This is Modal.</p>
        </div>
      </div>
    );
  }
}

子コンポーネント側は、this.props.[親で指定した名前]で、親から受け取ったstateやメソッドを使用できます。

Vue.jsも同じ考え方で対応できますが、子コンポーネント側でpropsプロパティを追加しなくても使える分、Reactの方が楽にかけますね。