🙆♀️
React(TypeScript)のuseRefで「型 'never' に存在しません。」のエラー
こんにちは。
タイトル通りのエラー内容です。
エラー内容
ReactでuseRefを使用したところ下記のエラーがでました。
プロパティ 'scrollHeight' は型 'never' に存在しません。
div要素の高さが動的に変更されるため、useRefを使用して高さを取得後にcss変数を使用して高さのスタイルを調節しています。
const refText = useRef(null)
<div
className={styles.text}
ref={refText}
style={{
['--text-height' as any]: refText.current
? `${refText.current.scrollHeight}px`
: '0px',
}}
>
refText.current.scrollHeightのところで上記のエラーが発生していました。
原因はuseRefの使用時に型を指定していなかったため
解決方法
useRefを使用する時に型の定義をすれば解決です。
今回はdiv要素で使用しているので、下記になります。
const refText = useRef<HTMLDivElement>(null)
divではなく、input要素で使用する場合は
const refText = useRef<HTMLInputElement>(null)
とHTMLInputElementと記述します。
Discussion