Reactガイドを読んでいくその40

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

ref のフォワーディング

refのフォワーディングとはコンポーネントを通して子コンポーネントのひとつにrefを自動的に渡すテクニック。
基本的には必要ないが、再利用可能なコンポーネントライブラリでは便利なものになる可能性がある。

DOM コンポーネントに ref をフォワーディングする

refのフォワーディングはオプトインの機能で、コンポーネントがrefを受け取って、それをさらに下層のの子に渡せるようになる。

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

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

上の例で起こっていること
 1.React.createRef を呼び、React ref をつくり、それを ref 変数に代入します。  2.ref を <FancyButton ref={ref}> に JSX の属性として指定することで渡します。  3.React は ref を、forwardRef 内の関数 (props, ref) => ... の 2 番目の引数として渡します。  4.この引数として受け取った ref を <button ref={ref}> に JSX の属性として指定することで渡します。  5.この ref が紐付けられると、ref.current は <button> DOM ノードのことを指すようになります。

コンポーネントライブラリのメンテナ向けの補足

コンポーネントライブラリの中でforwardRefを使い始めた場合は破壊的変更として扱う。
特に、古い挙動に依存している場所を破壊してしまう可能性があるため。
プロジェクトとして新しいメジャーバージョンをリリースするタイミングとみなしたほうが良い。 React.forwardRefが存在する場合だけ、条件的にReact.forwardRefを適用することも上と同様に非推奨なので注意する。

今日はここまで。