Blogbeitrag: Erstellen einer einfachen Foliennavigationskomponente in React

In diesem Beitrag gehen wir Schritt für Schritt durch die Erstellung einer grundlegenden Foliennavigationskomponente in React. Mit dieser Komponente k?nnen Benutzer mithilfe der Schaltfl?chen ?Neustart“, ?Zurück“ und ?Weiter“ durch eine Reihe von Folien navigieren. Wir verwalten den aktuellen Folienindex mithilfe des useState-Hooks von React und stellen sicher, dass die Schaltfl?chen bei Bedarf deaktiviert sind (z. B. am Anfang oder Ende des Foliendecks).

übersicht über den Kodex

Die Slides-Komponente erh?lt eine Reihe von Folien als Requisite. Jede Folie enth?lt einen Titel und etwas Text. Mit den Navigationsschaltfl?chen kann der Benutzer vorw?rts und rückw?rts durch die Folien navigieren, und die Schaltfl?che ?Neustart“ bringt den Benutzer zurück zur ersten Folie.

Verwalten des Status mit useState

Wir verwenden den useState-Hook, um den aktuellen Folienindex zu verwalten:

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

Dieser Status verfolgt die aktuell angezeigte Folie. Wir beginnen bei Folie 0 und aktualisieren diesen Wert, wenn Benutzer auf die Schaltfl?chen ?Zurück“, ?Weiter“ oder ?Neustart“ klicken.

Umgang mit Schaltfl?chenklicks

Wir definieren drei Funktionen, um das Verhalten jeder Schaltfl?che zu verwalten:

1. Neustart-Schaltfl?che: Setzt den aktuellen Folienindex auf 0 zurück und bringt den Benutzer zurück zur ersten Folie.

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

1. Vorherige Schaltfl?che: Verringert den Folienindex um 1, stellt jedoch sicher, dass er niemals unter 0 f?llt (die erste Folie).

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

1. Weiter-Schaltfl?che: Erh?ht den Folienindex um 1, stellt jedoch sicher, dass er nicht über die letzte Folie hinausgeht.

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

Tasten deaktivieren

Wir deaktivieren die Schaltfl?chen ?Zurück“ und ?Neustart“, wenn der Benutzer die erste Folie ansieht, und die Schaltfl?che ?Weiter“ ist deaktiviert, wenn der Benutzer die letzte Folie ansieht:

<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>

Rendern des Folieninhalts

Die Komponente rendert den Titel und Text der aktuellen Folie unter Verwendung des aktuellenSlideIndex-Status:

<div>



<h4>
  
  
  Abschluss
</h4>

<p>Diese einfache, aber effektive Foliennavigationskomponente demonstriert die Leistungsf?higkeit von Reacts useState zur Verwaltung des UI-Status. Durch den Einsatz dynamischer Zustands- und Ereignisbehandlung haben wir eine flexible Komponente geschaffen, die es Benutzern erm?glicht, auf benutzerfreundliche Weise mit den Folien zu interagieren. Sie k?nnen diese Komponente erweitern, indem Sie Funktionen wie Animationen oder automatische Folienüberg?nge hinzufügen.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Paginierung in React.js Neustart, Zurück, Weiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!