react 函数组件 获取 antd Image 组件 ref

在React中，特别是使用Ant Design库时，如果你想获取`<Image>`组件的ref以便于后续操作，例如改变其src、获取元素大小等，可以按照以下步骤操作：

首先，在你的函数组件中创建一个`useRef`钩子来存储对`<Image>`组件的引用：

import React, { useRef } from 'react';
import { Image } from 'antd';

const MyComponent = () => {
  const imageRef = useRef(null); // 创建一个ref实例

  // 当图片加载完成时，你可以访问这个ref
  const handleLoad = (response) => {
    if (imageRef.current && response.ok) {
      // 设置图片src或其他属性
      imageRef.current.src = response.url;
    }
  };

  return (
    <Image
      ref={imageRef} // 将ref绑定到Image组件上
      src="初始图片地址"
      onLoad={handleLoad}
    />
  );
};

在这个例子中，当你需要获取图片的宽高或者其他DOM信息时，可以直接从`imageRef.current`中获取。同时，`onLoad`属性会传递给Image组件，当图片加载完成后回调`handleLoad`方法。