React函数组件中如何在外部获取图片的offsetHeight与offsetWidth？

你遇到的报错直接原因是：offsetHeight和offsetWidth是onImgLoad函数内部的局部变量，只在该函数范围内有效，组件外部根本访问不到，所以会报“未定义”错误。而且就算能访问，组件外部的代码会在图片加载完成前就执行，拿到的也不是正确的尺寸值。

下面是几个可行的解决办法：

• 直接在onLoad回调里处理尺寸逻辑
  这是最直接且符合React渲染逻辑的方式，把需要用到图片尺寸的操作直接写在onImgLoad里：

  function WH() {
      const onImgLoad = ({ target: x }) => {
          const { offsetHeight, offsetWidth } = x;
          console.log(offsetHeight, offsetWidth);
          // 在这里写所有需要用到尺寸的逻辑，比如发送请求、更新状态等
          handleSizeUsage(offsetHeight, offsetWidth);
      };
  
      const handleSizeUsage = (height, width) => {
          // 示例：处理尺寸的业务逻辑
          console.log("处理后图片尺寸：", height, width);
      };
  
      return (
          <div>
              <img
                  onLoad={onImgLoad}
                  alt=""
                  src={dragUrl.current}
              />
          </div>
      );
  }
  

• 将尺寸存到组件外部变量（慎用）
  如果你一定要在组件外部使用这些值，可以声明全局变量存储，但要注意多次加载图片时的变量覆盖问题：

  // 组件外部声明变量
  let globalImgHeight = 0;
  let globalImgWidth = 0;
  
  function WH() {
      const onImgLoad = ({ target: x }) => {
          const { offsetHeight, offsetWidth } = x;
          globalImgHeight = offsetHeight;
          globalImgWidth = offsetWidth;
          // 此时外部变量已更新，可触发后续逻辑
          console.log("height", globalImgHeight);
          console.log("width", globalImgWidth);
      };
  
      return (
          <div>
              <img
                  onLoad={onImgLoad}
                  alt=""
                  src={dragUrl.current}
              />
          </div>
      );
  }
  // 注意：直接在这里打印会拿到初始值0，因为图片加载是异步操作，需等待onLoad触发后才会更新
  

• 用React状态管理（适合复杂场景）
  如果是在React应用中，更规范的方式是把尺寸存在组件状态或全局状态（如Context、Redux）里，其他组件或逻辑可通过状态获取：

  import { useState } from 'react';
  
  function WH() {
      const [imgSize, setImgSize] = useState({ height: 0, width: 0 });
  
      const onImgLoad = ({ target: x }) => {
          const { offsetHeight, offsetWidth } = x;
          setImgSize({ height: offsetHeight, width: offsetWidth });
      };
  
      // 组件内可随时通过imgSize获取最新尺寸
      console.log("组件内实时尺寸：", imgSize);
  
      return (
          <div>
              <img
                  onLoad={onImgLoad}
                  alt=""
                  src={dragUrl.current}
              />
          </div>
      );
  }
  

总结：核心问题是变量作用域限制和图片异步加载的时机差，优先选择在onLoad回调内处理尺寸相关逻辑，这是最贴合React组件渲染流程的方案。

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