DOMを参照するuseRefの使い方 (TypeScript)

const ref = useRef<HTMLDivElement>(null!);
 
// ...
 
return (
    <div ref={ref>...</div>
);

このようにするとref.currentがreadonlyになり間違って値を代入することを防ぐことができる(DOM参照のためにuseRefを使う場合、ユーザーが値を設定することは普通ない)。さらに、nullではなくnull!とすることによりref.currentがnullになることはないとTSコンパイラに教えることができる。

---

"上"のページ: React