問題一覧に戻る
中級高度なパターン
問題65: forwardRef

forwardRefを使用して、親コンポーネントから子コンポーネントのDOM要素にrefを転送する方法を学びます。カスタムコンポーネントにラップされた入力要素に外部からアクセスしたい場合などに使用します。forwardRefでコンポーネントをラップし、第2引数でrefを受け取ります。ライブラリのコンポーネント作成や、高度なUIコンポーネントの実装に欠かせない技術です。

import React, { useRef, forwardRef } from 'react';

{/* ref転送コンポーネント */}
const FancyInput = ((props, ref) => (
  <input ref={} style={{ border: '2px solid blue' }} />
));

function App() {
  {/* refを作成 */}
  const inputRef = ();

  return (
    <div>
      {/* refを渡す */}
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}

export default App;