react子组件向父组件传递一个图片

在 React 中，子组件向父组件传递数据是通过 props 来实现的。如果你想从子组件向父组件传递一个图片，可以将图片的 URL 作为 props 传递给父组件。

下面是一个示例代码：

// 子组件
function ChildComponent(props) {
  const imageSrc = 'https://example.com/image.jpg'; // 图片 URL
  return (
    <div>
      <img src={imageSrc} alt="example" />
      <button onClick={() => props.onImageClick(imageSrc)}>传递图片</button>
    </div>
  );
}

// 父组件
function ParentComponent() {
  function handleImageClick(imageSrc) {
    console.log(`收到图片 ${imageSrc}`);
  }
  return (
    <div>
      <h1>父组件</h1>
      <ChildComponent onImageClick={handleImageClick} />
    </div>
  );
}

在上面的代码中，子组件 `ChildComponent` 中有一个图片和一个按钮。当按钮被点击时，调用 `props.onImageClick` 方法，并将图片 URL 作为参数传递。在父组件 `ParentComponent` 中，定义了 `handleImageClick` 方法来接收子组件传递过来的图片 URL。在渲染 `ChildComponent` 时，将 `handleImageClick` 方法作为 `onImageClick` prop 传递给子组件。这样，当子组件中的按钮被点击时，就会调用父组件中定义的 `handleImageClick` 方法，并将图片 URL 作为参数传递给它。