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

Question

我想使用反应钩子在反应功能组件中获取图像的高度。

我使用了以下代码：

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 为零。

同样，我不能在useEffect 中使用....}, [ref && ref.current && ref.current.clientHeight]，因为useEffect 不接受复杂的表达式。如果我将useEffect 外部或内部的变量定义为const clientHeight = (ref && ref.current && ref.current.clientHeight) || 0，那就不走运了！

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

Answer 1

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

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

一种选择是只在图像元素上使用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}
    />
  )
}

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

Answer 2

最有可能的是，当您的效果执行时，图像尚未加载，因此其高度为 0。稍后当它被加载时，它会更新节点的属性，这就是您在控制台中看到的内容（因为您正在记录节点实例）。

您可以像这样在useEffect 回调中订阅加载事件：

  useEffect(() => {
      ref.current.addEventListener('load', () => {
          console.log(ref.current.clientHeight);
      });
  }, [ref])

Answer 3

注意：我最初忽略了被测量元素是img 的事实。嗬！所以我发布了一个community wiki answer combining the below with the onload 显示在Marko's answer 中。

---

useEffect 回调在渲染后立即发生；浏览器还没有机会布局元素。由于this feature of console，您稍后会看到正确的高度。

在大多数现代浏览器上，您应该能够使用值为0 的setTimeoout 来解决此问题。或者，或者，两个requestAnimationFrame 回调（第一个将发生在元素布局之前之前，因此没有帮助；第二个是之后）。

例如：

useEffect(() => {
  let cancelled = false;
  const getHeight = () => {
    const { current } = ref; // `ref` will never be falsy
    if (!current || !current.clientHeight) {
      if (!cancelled) {
        requestAnimationFrame(getHeight);
      }
    } else {
      // Use `current.clientHeight` here
    }
  };
  getHeight();
  return () => {
      cancelled = true;
  };
}, []);

当然，高度可以根据其他事物的变化而变化......

如果要在元素变化时更新高度，请将其添加为依赖项：

}, [ref.current]);

不过，这只会在元素更改时更新它；如果有其他东西改变了元素的高度，那将不会再次触发效果回调。

现场示例：

const { useRef, useEffect } = React;

const DepthRuler = "https://via.placeholder.com/150";

const DepthChartContent = props => {
  const ref = useRef()
  const counterRef = useRef(0); // Just to count loops

  useEffect(() => {
    let cancelled = false;
    const getHeight = () => {
      ++counterRef.current;
      const { current } = ref; // `ref` will never be falsy
      if (!current || !current.clientHeight) {
        if (!cancelled) {
          requestAnimationFrame(getHeight);
        }
      } else {
        // Use `current.clientHeight` here
        console.log(`Height is ${current.clientHeight}, getHeight calls: ${counterRef.current}`);
      }
    };
    getHeight();
    return () => {
        cancelled = true;
    };
  }, []);

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

ReactDOM.render(<DepthChartContent />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 4

不管怎样，这里是Marko's solution 和mine 的组合。它不会尝试查找客户端高度，直到/除非图像已加载，但最多会使用两次requestAnimationFrame（因为它不应该超过两个，并且通常不会使用任何或只使用一个）到如果图像尚未布局，则获取高度：

const { useEffect } = React;

const DepthRuler = "https://via.placeholder.com/150";

const DepthChartContent = props => {
  const handleImageLoad = (event) => {
    const {target} = event;
    let counter = 0;
    const done = () => {
      const imageHeight = target.clientHeight;
      console.log(`Height: ${imageHeight} (counter: ${counter})`);
    };
    const maybeDone = () => {
      if (target.clientHeight) {
        done();
      } else if (++counter < 3) {
        requestAnimationFrame(maybeDone);
      } else {
        console.log("Couldn't get height");
      }
    };
    maybeDone();
  };

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

ReactDOM.render(<DepthChartContent />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 5

这样的事情怎么样。

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

const DepthChartContent = props => {

    const ref = useRef();
    const [imageHeight, setImageHeight] = useState(0);

    useEffect(() => {
        setImageHeight(ref.current.clientHeight)
    }, [ref.current]);

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