🙆‍♀️

React(TypeScript)のuseRefで「型 'never' に存在しません。」のエラー

2023/01/22に公開

こんにちは。

タイトル通りのエラー内容です。

エラー内容

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