React中如何通过图片点击事件将img src从父组件传至子组件

你的代码存在几个关键问题导致子组件无法获取到正确的src，以下是问题分析和修复方案：

问题根源 #

1. 错误修改React状态：直接调用LoadMoreVideos.push()修改useState返回的数组，这不符合React状态更新规则，不会触发组件重渲染，也可能导致状态不一致。
2. 组件被当作事件回调使用：你把ChildComponent直接绑定为img的onClick回调，但组件不是事件处理函数，无法正确接收事件对象，而且这种调用方式完全错误。
3. 子组件参数错误：React组件仅接受props作为唯一参数，你试图通过第二个参数获取事件对象是不可能的。

正确实现代码 #

ParentComponent.js #

import { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = ({ fetchData }) => {
  // 存储选中的图片src，用于传递给子组件
  const [selectedImageSrc, setSelectedImageSrc] = useState(null);
  const [loadMoreVideos, setLoadMoreVideos] = useState([]);

  // 当fetchData更新时生成图片列表
  useEffect(() => {
    if (!fetchData?.videos) return;
    
    const imageList = fetchData.videos.map((video, idx) => (
      <img
        className="m-4 mx-auto hover:cursor-pointer"
        width="280"
        height="160"
        src={video.thumbnail}
        key={video.id || idx} // 优先用视频唯一ID，无则用索引
        onClick={() => setSelectedImageSrc(video.thumbnail)}
      />
    ));
    
    setLoadMoreVideos(imageList);
  }, [fetchData]);

  return (
    <div>
      {/* 渲染图片列表 */}
      {loadMoreVideos}
      {/* 通过props将选中的src传给子组件 */}
      <ChildComponent selectedSrc={selectedImageSrc} />
    </div>
  );
};

export default ParentComponent;

ChildComponent.js #

import { useEffect } from 'react';

const ChildComponent = ({ selectedSrc }) => {
  // 当selectedSrc变化时打印
  useEffect(() => {
    if (selectedSrc) {
      console.log('获取到的图片src:', selectedSrc);
    }
  }, [selectedSrc]);

  return (
    <div>
      {selectedSrc && <p>当前选中的图片地址：{selectedSrc}</p>}
    </div>
  );
};

export default ChildComponent;

关键说明 #

• 状态更新规范：React状态必须通过对应的setter函数（如setLoadMoreVideos）更新，直接操作状态值不会触发组件重渲染。
• 事件处理逻辑：图片点击时，先将src存入父组件的状态，再通过props传递给子组件，这是React中父子组件数据传递的标准方式。
• 子组件接收数据：子组件通过props获取父组件传递的数据，不需要直接处理父组件的事件对象。

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