Question

React ref.current.clientHeight 报告来自同一对象的两个不同值

2021-10-11

976

reactjs use-ref

我需要 React 的 ref clientHeight 报告组件的高度，但我遇到了这种奇怪的行为，即同一 ref 会根据访问方式报告不同的 clientHeight 值。如果我在 div 内输出文本，ref 会始终输出正确的高度。

  const test = useRef(null)


  useEffect(() => {
        console.log(test)
        console.log(test.current.clientHeight)
    },[])

     return <div ref={test}>
            <Input value={state.multiLineString} multiline/>
        </div>

这些图像输出我从 test.current 对象访问 clientHeight 以及直接通过 test.current.clientHeight 访问 clientHeight。观察它们是否一致。

这些图像输出我以相同的方式访问 clientHeight，但将状态中的文本传递给多行输入。观察发现，尽管第一个对象输出具有正确的值，但它们并不一致。

为什么会发生这种情况，因为我非常困惑并且已经用尽了我能找到的所有资源。谢谢。

编辑

repo 这里

https://codesandbox.io/s/optimistic-hermann-q6mnv?file=/src/App.js

Answer 1

如果您有一个区域需要稍后再调整大小，例如图片区域，在第一种情况下，clientHeight 会显示，而无需计算该大小。在这种情况下，如果图片区域的容器被赋予静态高度，则会显示正确的结果。

Answer 2

在类似您的情况中，您可能应该使用 callback ref 以及类似 ResizeObserver 的库。为方便使用，请查看 use-resize-observer 库。

使用此库的代码摘录，取自其文档：

const App = () => {
  const {
    ref,
    width = 1,
    height = 1,
  } = useResizeObserver();

  return (
    <div ref={ref}>
      Size: {width}x{height}
    </div>
  );
};