親から子コンポーネントのstateにcreateRefを使ってアクセスする

表題の通りだけど、個人的におすすめしない。

refでDOM要素にもコンポーネントにも自由にアクセスできるようにはなるが、せっかくpropsでコンポーネント間のやり取りができるようになっているので、あまりそれを崩したくない。 ちなみに、reactのリファレンスにはrefを使うのに適したケースとして以下が挙げられている。

• フォーカス、テキストの選択およびメディアの再生の管理
• アニメーションの発火
• サードパーティの DOM ライブラリとの統合

Ref と DOM – React

が、仕方ない場面はあるのでこういった方法を採用することもある。

下記のようにして、子コンポーネントのstateにアクセスできる。

// クラスA内にBという子コンポーネントがあるとする

class A extends React.Component {
  constructor(props) {
    super(props);

    // stateを取得したい子コンポーネントにtestRefを渡すために、ここで作成
    this.testRef = React.createRef();
  }

  // クラスB内に作成したtestRefを渡す
  <B
    ref={this.testRef}
  />

  // Bコンポーネント内の value というstateにアクセスできる
  handleBstate = () => {
    const test = this.testRef.current.state.value
  }

}

繰り返すが、あまりおすすめはしない。 瞬間的に子コンポーネントの値を取得したい、関数を利用したいというケースでもなければあまり使わない方が無難だと思う。