javascript - Reactjs - 使用 React Hooks 获取 div/图像的高度

Question

我想得到高度 使用 react 钩子(Hook)在 react 功能组件中的图像。

我使用了以下代码:

import React, { useRef, useEffect } from 'react'

const DepthChartContent = props => {
  const ref = useRef()

  useEffect(() => {
    if (ref && ref.current && ref.current.clientHeight) {
      console.log('called')
    }
    console.log('useEffect', {
      ref,
      current: ref.current,
      clientHeight: ref.current.clientHeight,
    })
  }, [])

  return (
    <img
      ref={ref}
      className="depth-reference-bar"
      src={DepthRuler}
      alt="no ruler found"
    />
  )
}

问题在于它返回 clientHeight 为 0 但 useEffect 中的 console.log 具有正确的 clientHeight，如下图所示。



这意味着 ref && ref.current && ref.current.clientHeight调用时未定义，但在同一 useEffect 中的安慰显示 ref 的正确值, current: ref.current但是 clientHeight: ref.current.clientHeight是零。

同样，我不能使用 ....}, [ref && ref.current && ref.current.clientHeight]在 useEffect因为 useEffect不接受复杂的表达。如果我在 useEffect 外部或内部定义了一个变量如 const clientHeight = (ref && ref.current && ref.current.clientHeight) || 0 ， 没运气!

任何人都可以在这方面提供帮助。谢谢!

Answer 1

正如其他人在这里提到的，在大多数情况下，您的逻辑发生在图像加载之前。因此，您必须在图像加载后获取图像尺寸，因为在此之前浏览器不知道图像尺寸。

我知道你提到你想用钩子(Hook)来做，但除非你做一些可重用的事情，否则这里可能不需要钩子(Hook)。或者除非你想更好地理解它们，否则没关系。

一种选择是只使用 onLoad图像元素上的事件。这样，如果您在 ref.current 中有内容，您就不必进行所有这些检查。或者是 img.complete === true .

import React from 'react'

const DepthChartContent = props => {
  const handleImageLoad = (event) => {
    // Do whatever you want here
    const imageHeight = event.target.clientHeight;
  }

  return (
    <img
      ref={ref}
      className="depth-reference-bar"
      src={DepthRuler}
      alt="no ruler found"
      onLoad={handleImageLoad}
    />
  )
}

不要误会我的意思，我绝对喜欢钩子(Hook)，但它们并不总是解决方案。