Reactで親から子へstate/メソッドをpropsで渡す時の考え方
時々忘れる時があるのでメモ。 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の方が楽にかけますね。