react图片预览组件

你可以使用 `react-image-lightbox` 这个第三方库来实现图片预览组件。以下是一个基本示例：

首先，安装 `react-image-lightbox`：

npm install react-image-lightbox

接下来，在你的组件中导入 `react-image-lightbox` 并创建一个 `ImagePreview` 组件，其中包含触发预览的图片和 `react-image-lightbox` 组件：

import React, { useState } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';

const ImagePreview = ({ imageUrl }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <img
        src={imageUrl}
        alt="Preview"
        onClick={() => setIsOpen(true)}
      />
      {isOpen && (
        <Lightbox
          mainSrc={imageUrl}
          onCloseRequest={() => setIsOpen(false)}
        />
      )}
    </>
  );
};

export default ImagePreview;

在上面的代码中，我们首先引入了 `react-image-lightbox` 组件和它的样式文件。然后，我们创建了一个 `ImagePreview` 组件，接受一个 `imageUrl` 属性作为输入。这个组件包含一个 `<img>` 元素，点击这个元素会触发 `setIsOpen(true)`，使得 `isOpen` 变为 `true`，从而展示图片预览。

当 `isOpen` 为 `true` 时，我们会渲染 `react-image-lightbox` 组件，并传入 `mainSrc` 和 `onCloseRequest` 属性。其中，`mainSrc` 是要预览的图片链接，`onCloseRequest` 是点击关闭按钮或者按下 ESC 键时触发的回调函数。

最后，我们导出 `ImagePreview` 组件，可以在其他组件中使用。例如：

import React from 'react';
import ImagePreview from './ImagePreview';

const App = () => {
  return (
    <div>
      <ImagePreview imageUrl="https://picsum.photos/200/300" />
    </div>
  );
};

export default App;

在上面的代码中，我们在 `App` 组件中使用了 `ImagePreview` 组件，并传入一个图片链接作为 `imageUrl` 属性。这样，当用户在页面上看到这个图片时，就可以点击它进行预览了。