获取属性“高度”在“字符串”类型上不存在 TypeScript 错误

Question

我使用useRef 来引用一个div 元素并存储getBoundingClientRect()。使用它时，我收到了 Property 'height' does not exist on type 'string' 的 TypeScript 错误。如何解决此错误？

const divRef = useRef(null);
const [divSize, setDivSize] = useState("0");

setDivSize(divRef.current.getBoundingClientRect());

console.log(divSize.height); // getting TS error: Property 'height' does not exist on type 'string'.

return (
  <Content ref={divRef}>
     {content}
  </Content>
)

Answer 1

您可以将带有useRef 的泛型类型用于具有getBoundingClientRect 作为有效方法的东西，例如HTMLElement 或HTMLDivElement：

const divRef = useRef<HTMLDivElement>(null);

这应该允许访问getBoundingClientRect() 的结果的height。

这纯粹是打字的解决方案。 jsejcksn 的回答有助于解释如何以有效的方式处理 falsy/undefined ref。

Answer 2

在任何组件的顶层无条件调用setState 函数始终是错误的，因为它会启动协调算法（无限）。这是 React 文档中的一个注释（需要针对功能组件进行更新）：

您可以立即在componentDidUpdate() 中调用setState()，但请注意，它必须像上面的示例一样包含在条件中，否则您将导致无限循环。

↳https://reactjs.org/docs/react-component.html#componentdidupdate

要解决此问题，请将 setState 调用包装在 the effect hook 中：

const divRef = useRef<HTMLDivElement>(null);
const [divSize, setDivSize] = useState(new DOMRect());

useEffect(() => {
  if (!divRef.current) return;
  const rect = divRef.current.getBoundingClientRect();
  setDivSize(rect);
  console.log(rect.height);
});

return (
  <Content ref={divRef}>
     {content}
  </Content>
)

Also, you can't use the ref prop on a functional component.