Почему `ref.current.clientHeight` всегда может быть нулевым?

Question

Я пытаюсь найти высоту компонента в пикселях, поскольку его высота будет установлена ​​на 100% в CSS

import React, { useState, useLayoutEffect, useRef } from "react";

function Scale() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);
  useLayoutEffect(() => {
    if (ref && ref.current && ref.current.clientHeight) {
//                              ^ error: Object is possibly 'null'
      const height = ref.current.clientHeight;
      setHeight(height);
    }
  });
  return (
    <div className="scale" ref={ref}>
      {height}
    </div>
  );
}

export { Scale };

Answer 1

ref никогда не будет null, так как const и не является нулевым для начала, поэтому if (ref) бесполезно.

Тип useRef<T>(x: T | null) является MutableRefObject<T>. Здесь T равно null, поэтому тип ref.current равен null.

Чтобы исправить это, укажите тип, который будет после его установки:

  const ref = useRef(null as null | HTMLDivElement);
  // Or manually specify the type parameter
  const ref = useRef<HTMLDivElement>(null)
  useLayoutEffect(() => {
    if (ref.current && ref.current.clientHeight) {
      const height = ref.current.clientHeight;
      setHeight(height);
    }
  });

Answer 2

if (ref && ref.current && ref.current.clientHeight) {
   //                        ^ error: Object is possibly 'null'
   const height = ref.current.clientHeight;
   setHeight(height);
}

Это утверждение должно работать, но TypeScript часто не выводит, как мы ожидаем.

Итак, лучшее решение (не просто какой-то хакерский обходной путь) заключается в использовании Babel Необязательно Подключаемый модуль .

Добавьте его к своему .babelrc.js, и вы можете заменить этот оператор на

if (ref?.current?.clientHeight) {
   const height = ref.current.clientHeight;
   setHeight(height);
}

Это фактически нативная функция TypeScript 3.7, поэтому она работает как шарм.