使用来自 "ref" 的属性的对象的 setState

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

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

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

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

Playground link

在您的实际代码中，它是一个 Box，其中 looks like 它呈现一个 div，所以我假设它将引用转发给 div，但您可能需要 Material-UI 更具体的内容。最基本的是你必须说出 ref 指的是什么。

在 Material-UI 中挖掘，我看不出 Box 直接支持 ref，尽管 this 暗示它支持。 BoxProps 上面好像没有 ref。 Box 文档列出了 children、clone 和 component 并说 “提供的任何其他属性将由样式函数使用或传播到根element." 但 TypeScript 类型似乎不支持这样做。

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

使用来自 "ref" 的属性的对象的 setState

setState of object using properties coming from a "ref"

setstate

typescript

reactjs

material-ui