createRef

リファレンス

createRef()

createRef を呼び出して、内で を宣言します。

引数

createRef は引数を取りません。

返り値

createRef は単一のプロパティを持つオブジェクトを返します。

• current: null に初期化されています。後で他の値にセットすることができます。JSX ノードの ref 属性として React に ref オブジェクトを渡すと、React はその current プロパティを適切にセットします。

注意点

• createRef は常に異なるオブジェクトを返します。これは自分で { current: null } を書くのと同等です。
• 関数コンポーネントでは、同じオブジェクトを常に返す を代わりに使用することをお勧めします。
• const ref = useRef() は const [ref, _] = useState(() => createRef(null)) と同等です。

使用法

クラスコンポーネントで ref を宣言する

内で ref を宣言するには、createRef を呼び出し、その結果をクラスフィールドに割り当てます。

これで JSX の <input> に ref={this.inputRef} を渡すと、React は this.inputRef.current を input の DOM ノードにセットします。例えば以下のようにして、input をフォーカスするボタンを作ることができます。

代替手段

createRef を使ったクラスから useRef を使った関数への移行

新しいコードではの代わりに関数コンポーネントの使用を推奨します。以下に、createRef を使用している既存のクラスコンポーネントがある場合の移行方法を示します。こちらが元のコードです。

このコンポーネントを場合、createRef の呼び出しを の呼び出しに置き換えます。