部落格文章：在 React 中建立簡單的幻燈片導航元件

在這篇文章中，我們將逐步介紹如何在 React 中建立一個基本的幻燈片導覽元件。此元件允許使用者使用「重新啟動」、「上一頁」和「下一頁」按鈕瀏覽一系列幻燈片。我們將使用 React 的 useState 鉤子管理目前投影片索引，並確保在適當?shù)臅r候停用按鈕（例如，在投影片的開頭或結尾）。

準則概述

幻燈片組件接收幻燈片數(shù)組作為道具。每張投影片都包含一個標題和一些文字。導航按鈕允許使用者在幻燈片中向前和向後移動，「重新啟動」按鈕使用戶返回到第一張投影片。

使用 useState 管理狀態(tài)

我們使用 useState 鉤子來管理目前投影片索引：

const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

此狀態(tài)追蹤目前顯示的幻燈片。我們從投影片 0 開始，並在使用者點擊「上一張」、「下一張」或「重新啟動」按鈕時更新此值。

處理按鈕點擊

我們定義了三個函數(shù)來處理每個按鈕的行為：

1. 重新啟動按鈕：將目前投影片索引重設為 0，將使用者帶回第一張投影片。

const handleRestart = () => {
  setCurrentSlideIndex(0);
};

1. 上一頁按鈕：將投影片索引減 1，但確保它永遠不會低於 0（第一張投影片）。

const handlePrev = () => {
  setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};

1. 下一個按鈕：將投影片索引增加 1，但確保它不會超出最後一張投影片。

const handleNext = () => {
  setCurrentSlideIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1));
};

禁用按鈕

當使用者查看第一張投影片時，我們會停用「上一張」和「重新開始」按鈕，當使用者查看最後一張投影片時，我們會停用「下一張」按鈕：

<button
  data-testid="button-restart"
  onClick={handleRestart}
  disabled={currentSlideIndex === 0}
>
  Restart
</button>

<button
  data-testid="button-prev"
  onClick={handlePrev}
  disabled={currentSlideIndex === 0}
>
  Prev
</button>

<button
  data-testid="button-next"
  onClick={handleNext}
  disabled={currentSlideIndex === slides.length - 1}
>
  Next
</button>

渲染投影片內(nèi)容

元件使用 currentSlideIndex 狀態(tài)渲染目前投影片的標題和文字：

<div>



<h4>
  
  
  結論
</h4>

<p>這個簡單而有效的滑動導航元件展示了 React useState 管理 UI 狀態(tài)的強大功能。透過使用動態(tài)狀態(tài)和事件處理，我們創(chuàng)建了一個靈活的元件，允許用戶以用戶友好的方式與投影片互動。您可以透過新增動畫或自動幻燈片轉換等功能來擴展此元件。 </p>


          </div>

            
        

以上是如何在react.js中進行分頁重啟，上一頁，下一頁的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！