點擊按鈕從 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);