Reactガイドを読んでいくその273
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
フック API リファレンス
useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])
refが使われたときに親コンポーネントに渡されるインスタンス値をカスタマイズするのに使う。
refを使った手続き的なコードは基本的には避けるべきであることを認識しておく必要がある。
useImperativeHandleはforwardRefと組み合わせて使う。
例として以下のようなコードがある。
function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} ... />; } FancyInput = forwardRef(FancyInput);
今日はここまで。