Reactガイドを読んでいくその40
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
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を適用することも上と同様に非推奨なので注意する。
今日はここまで。