React项目中动态创建Ref实现图片加载效果报错求助

报错原因分析 #

1. 子组件参数结构错误：你写的function ProjectCard({...},ref)写法无效，React组件第一个参数是完整props对象，这种错误解构导致props无法正确接收，同时forwardRef传递的ref也没被正确关联。
2. 父组件ref管理混乱：每次调用showprojects生成新卡片时，未清空旧的ref集合，且ref回调未处理组件卸载时传入的null，导致imagesRef.current不断积累无效或重复的ref。

代码修正步骤 #

1. 修复子组件参数与图片加载逻辑 #

子组件需正确接收props和ref，同时在图片加载完成后修改透明度实现显示效果：

function ProjectCard(props, ref) {
  const { imgurl } = props;
  
  return (
    // 保留你原有的其他卡片结构代码
    <img
      style={{ opacity: 0, transition: 'opacity 0.3s ease-in-out' }}
      className="img"
      loading="lazy"
      src={require(`../../assets/img/project_image/${imgurl}`)}
      alt="项目图片"
      ref={ref}
      onLoad={(e) => {
        // 图片加载完成后切换显示状态
        e.target.style.opacity = 1;
      }}
    />
  );
}
export default React.forwardRef(ProjectCard);

2. 优化父组件的ref管理逻辑 #

修改addrefitem函数，通过索引精准管理每个图片的ref，同时在生成新卡片前清空旧ref集合：

function Projects() {
  let imagesRef = useRef([]);
  let [projectCard, setProjectCard] = useState([]);

  // 通过索引绑定ref，处理组件卸载时的null值
  let addrefitem = (img, index) => {
    if (img) {
      imagesRef.current[index] = img;
    } else {
      delete imagesRef.current[index];
    }
  };

  let showprojects = (start, end) => {
    let show = [];
    // 清空旧ref集合，避免残留无效数据
    imagesRef.current = [];
    
    for (let i = start; i < end; i++) {
      if (i <= data.length - 1) {
        // 传递索引给ref回调，确保每个ref对应正确的项目
        show.push(
          <ProjectCard 
            key={i} 
            {...data[i]} 
            ref={(img) => addrefitem(img, i)} 
          />
        );
      }
    }
    setProjectCard(show);
  };

  // 保留你原有的return部分代码
}

额外说明 #

• 给ProjectCard添加key={i}是为了让React正确识别列表项，避免不必要的重渲染。
• 图片的过渡动画通过transition属性实现，让显示效果更平滑。

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