親コンポーネントで子コンポーネントの参照にアクセスする方法

質問

もし私が以下のようなものを持っていたら

<Parent>
  <Child1 />
  <Child2 />
  <Child3 />
</Parent>

そして Child2 ここで refs="child2refs" となっているのですが、どうすればいいのでしょうか？

どのように解決するのですか？

16.3より前のバージョンのReactに推奨されます。

どうしても避けられない場合は React ドキュメント はそうでしょう。

import React, { Component } from 'react';

const Child = ({ setRef }) => <input type="text" ref={setRef} />;

class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef} />
    }
}

この 親 にバインドされたpropとして関数を転送します。 親の this . を呼び出すと、Reactは 子プロセスの ref プロップ setRef を指定すると 子プロセスの ref に対して 親の childRef のプロパティを指定します。

React >= 16.3での推奨環境です。

Ref forwarding は、いくつかのコンポーネントが受け取った Ref を、さらに下の子へ渡す（言い換えれば、「転送」する）ことを可能にするオプトイン機能です。

私たちは コンポーネント を作成し、その ref と React.forwardRef . 返された コンポーネント の戻り値の型と同じでなければなりません。 React.createRef . React が DOM ノードをマウントするときは、必ずプロパティ current の ref で作成された React.createRef で作成されたものは、基礎となる DOM ノードを指します。

import React from "react";

const LibraryButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    FancyButton
  </button>
));

class AutoFocus extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  componentDidMount() {
    this.childRef.current.focus();
  }

  onClick() {
    console.log("fancy!");
  }

  render() {
    return <LibraryButton onClick={this.onClick} ref={this.childRef} />;
  }
}

転送参照HOCの例

作成された コンポーネント は、その ref を子ノードに転送します。

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

参照 参照先を転送する を参照してください。