使用来自“ref”的属性设置对象的状态

Question

我有一个带有坐标的初始状态对象x = 0 and y = 0，我想在渲染 ref 所附加的 html 元素时更新该对象。

然而，Typescript 告诉我，我尝试在 useEffect 中访问的属性不存在，并出现以下错误

Property 'offsetWidth' does not exist on type 'never'.ts(2339)

。

Property 'offsetHeight' does not exist on type 'never'.ts(2339)

如何在 setState 方法中定义要设置的内容？

  const HierarchyScene = () => {
  const [initialTreePosition, setInitialTreePosition] = useState({
    x: 0,
    y: 0
  })
  const hierarchyContainerRef = useRef(null)

  useEffect(() => {
    if (hierarchyContainerRef) {
      setInitialTreePosition({
        x: hierarchyContainerRef?.current?.offsetWidth || 0,
        y: hierarchyContainerRef?.current?.offsetHeight || 0
      })
    }
  }, [hierarchyContainerRef])

  return (
    <Box ref={hierarchyContainerRef}>
      <Tree translate={initialTreePosition} />
    </Box>
  )
}

Answer 1

前言：请注意，即使解决了类型问题，如果调整了大小，组件的树位置信息也可能不正确。理想情况下，避免将该信息完全存储在状态中，并在每次需要时从引用中使用它。或者更好的是，如果可能的话，根本不需要它。

您必须通过提供类型参数来告诉 TypeScript ref 将引用什么。例如，如果您要在refa 上使用div，则为：

// **IF** it were going to be a `div`
const hierarchyContainerRef = useRef<HTMLDivElement>(null)

游乐场链接

在您的实际代码中，它是 a Box，看起来它渲染了 adiv所以我假设它将引用转发到div，但您可能需要更具体的 Material-UI 内容。最重要的是你必须说出遗嘱ref所指的内容。

在 Material-UI 中深入研究，我看不到它Box直接支持ref，尽管这表明它确实支持。BoxProps好像没有ref。文档Box列出了children、clone和 ，component并表示“提供的任何其他属性将由样式函数使用或传播到根元素。” 但 TypeScript 类型似乎不支持这样做。

ref您可能必须使用on来抑制错误Box，但也许 Material-UI 人员可以帮助在其组件上使用 refs。