在這篇文章中，我們將逐步介紹如何在 React 中建立一個基本的幻燈片導覽元件。此元件允許使用者使用「重新啟動」、「上一頁」和「下一頁」按鈕瀏覽一系列幻燈片。我們將使用 React 的 useState 鉤子管理目前投影片索引，並確保在適當的時候停用按鈕（例如，在投影片的開頭或結尾）。
幻燈片組件接收幻燈片數組作為道具。每張投影片都包含一個標題和一些文字。導航按鈕允許使用者在幻燈片中向前和向後移動，「重新啟動」按鈕使用戶返回到第一張投影片。
我們使用 useState 鉤子來管理目前投影片索引：
const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
此狀態追蹤目前顯示的幻燈片。我們從投影片 0 開始，並在使用者點擊「上一張」、「下一張」或「重新啟動」按鈕時更新此值。
我們定義了三個函數來處理每個按鈕的行為：
const handleRestart = () => {
setCurrentSlideIndex(0);
};
const handlePrev = () => {
setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};
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>
元件使用 currentSlideIndex 狀態渲染目前投影片的標題和文字：
<div>
<h4>
結論
</h4>
<p>這個簡單而有效的滑動導航元件展示了 React useState 管理 UI 狀態的強大功能。透過使用動態狀態和事件處理，我們創建了一個靈活的元件，允許用戶以用戶友好的方式與投影片互動。您可以透過新增動畫或自動幻燈片轉換等功能來擴展此元件。 </p>
</div>
以上是如何在react.js中進行分頁重啟，上一頁，下一頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！
