react 点击图片切换 图片

你可以使用 React 的 state 来实现这个功能。首先，你需要定义一个 state 来存储当前显示的图片的索引。然后，在点击图片时，更新 state 中的索引值，从而切换到下一张图片。最后，将 state 中的索引值与图片数组中的元素对应，来渲染当前显示的图片。

以下是一个简单的示例代码：

import React, { useState } from "react";

const ImageSlider = ({ images }) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const handleClick = () => {
    if (currentImageIndex === images.length - 1) {
      setCurrentImageIndex(0);
    } else {
      setCurrentImageIndex(currentImageIndex + 1);
    }
  };

  return (
    <div>
      <img src={images[currentImageIndex]} onClick={handleClick} />
    </div>
  );
};

export default ImageSlider;

在这个代码中，我们使用 useState 来定义了一个名为 currentImageIndex 的 state，并将其初始值设置为 0。在 handleClick 函数中，我们检查当前是否已经到达了图片数组的末尾，如果是，我们将索引值设置为 0，否则我们将索引值加 1。最后，我们渲染当前显示的图片，并将 handleClick 函数绑定到图片的 onClick 事件上。