elementRef.current?.clientHeight获取高度异常及onLoad函数触发问题求助

初始问题 #

我编写了一段代码用于获取元素高度，该元素实际高度为1465px，但elementRef.current?.clientHeight返回值为870px。我猜测可能与测量时padding未渲染有关，但按此计算高度应为820px，因此无法确定原因。

初始代码 #

const elementRef = useRef(null)
const [windowSize, setWindowSize] = useState(getWindowSize())
const [elementHeight, setElementHeight] = useState(null)

function getWindowSize() {
  const { innerWidth, innerHeight } = window
  return { innerWidth, innerHeight }
}

useEffect(() => {
  // 页面加载时处理逻辑
  setElementHeight(elementRef.current?.clientHeight)
  console.log(elementRef.current?.clientHeight)
  // 窗口 resize 处理逻辑
  function handleWindowResize() {
    setWindowSize(getWindowSize())
  }
  window.addEventListener('resize', handleWindowResize)
}, [])

return (
  <>
    <section
      className={props.bgColor + ' ' + props.textColor}
      //style={{ height: elementHeight + 'px' }}
      ref={elementRef}
    >
      <article>{props.children}</article>
      <div />
    </section>
  </>
)

更新后的问题 #

我将设置elementHeight的逻辑从useEffect移至onLoad触发的setElementHightOnLoad函数中，现在高度可正确获取，但该组件的两个实例无法触发此函数。

更新后代码 #

export default function Section(props: MessageProps) {
  const elementRef = useRef(null)
  const [windowSize, setWindowSize] = useState(getWindowSize())
  const [elementHeight, setElementHeight] = useState(null)

  function getWindowSize() {
    const { innerWidth, innerHeight } = window
    return { innerWidth, innerHeight }
  }

  function setElementHightOnLoad() {
    setElementHeight(elementRef.current?.clientHeight)
    console.log(elementRef.current?.clientHeight)
    console.log('test')
  }
  useEffect(() => {
    // 窗口 resize 处理逻辑
    function handleWindowResize() {
      setWindowSize(getWindowSize())
    }
    window.addEventListener('resize', handleWindowResize)
  }, [])

  //=== 将 section 高度设置为视口的100% ===
  useEffect(() => {
    if (windowSize > elementHeight) {
      console.log('resize')
    } else {
      console.log('not resize')
    }
  }, [windowSize])
  //=====================================
  return (
    <section
      className={props.bgColor + ' ' + props.textColor}
      onLoad={setElementHightOnLoad}
      //style={{ height: elementHeight + 'px' }}
      ref={elementRef}
    >
      <article>{props.children}</article>
      <div />
    </section>
  )
}

内容的提问来源于stack exchange，提问作者Laycookie