Reactで親から子のコンポーネントにアクセスする

Reactで親コンポーネントから、子コンポーネントにアクセスする。

独立性が下がるが、そうしないと実現できないこともあるので仕方がない。 そもそも独立してないような気もするので問題ないか。小規模だし。

状況

• 親コンポーネントPでページ全体のthis.stateを管理している。
• 子コンポーネントCのメソッドをPのstate変更時に実行したい。
• Cは、内部の表示の管理に使うだけのstateを持っている。

具体例

親コンポーネントのボタンを押すと、子コンポーネントが管理しているカウントを増やす。という例を考える。

Refs and the DOM – Reactと、Forwarding Refs – Reactを参考にして、作成した。

React.createRef()を使えば良い。<ref>.currentで実体にアクセスできる。

実装

See the Pen Parent accesses a child component in React by ikapper (@ikapper) on CodePen.

ソースのみ

class ChildComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
  /**
  * 親から呼ばれるメソッド
  */
  incCounter() {
    this.setState({
      counter: ++this.state.counter,
    });
  }
  render() {
    return (
      <div>Counter: {this.state.counter}</div>
    )
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 子コンポーネントへの参照を持つ
    this.childRef = React.createRef();
  }
  incChild() {
    // 子コンポーネントの実体を取得し、メソッドを呼び出す。
    this.childRef.current.incCounter();
  }
  render() {
    return (
      <div>
        <h1>Click the button to increase the count</h1>
        <button onClick={() => {this.incChild()}}>Click!</button>
        <ChildComp ref={this.childRef}/>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("app"));