点击按钮从 React.js function 返回图像

Question

我是 React.js 的新手，我正在尝试创建 SlideShow....

首先，当页面加载时，将加载一个图像（数组中的第一个），然后当用户在tag <a>上单击左键时，function slides()应该从全局变量返回路径。 图像被正确导入并且它们在数组中......每当页面加载时，只有第一张图片是可见的，并且不可能在图像之间进行更改。

我该怎么做才能返回<img>标签的路径以便出现正确的图像？

import bg1 from "../images/bg1.jpg";
import bg2 from "../images/bg2.jpg";
import bg3 from "../images/bg3.jpg";

global.images = [
    bg1, bg2, bg3
];

function slides(n) {
    return(
        global.images[n]
    );
}

<div className="slideShow">
   <img alt="Image" src={slides(0)} className="w-100 h-100"/>
   <a href="" className="prev" onClick={slides(1)}>&#10094;</a>
   <a href="" className="next" onClick={slides(2)}>&#10095;</a>
</div>

Answer 1

在您可以更改图像 src 之后，您需要一些方法来跟踪活动幻灯片编号

let currentSlide = 0;

let images = ["src1", "src2", "src3"];

function changeSlide(amount) {
  currentSlide += amount;

  currentSlide = currentSlide < 0 ? images.length : currentSlide;

  currentSlide = currentSlide > images.length ? images.length : currentSlide;

  let slideShow = document.getElementById("image");

  slideShow.src = images[currentSlide];
}

changeSlide(1);

changeSlide(-1);