React ist eines der beliebtesten JavaScript-Frameworks, mit dem Sie leistungsstarke und skalierbare Webanwendungen entwickeln können. Eine der wichtigsten Funktionen der Webanwendung ist die Möglichkeit, Inhalte wie Fotos, Nachrichten, Kommentare und vieles mehr mit Likes zu versehen. In diesem Artikel werden wir uns eine detaillierte Anleitung zum Erstellen einer Likes-Funktion auf React ansehen.
Zuerst müssen Sie eine Komponente erstellen, die ein einzelnes Inhaltselement darstellt, z. B. ein Foto oder eine Nachricht, um Likes auf React zu erstellen. In dieser Komponente können Sie einen Status hinzufügen, der die Anzahl der Likes anzeigt, sowie Methoden, die den Status aktualisieren, wenn Sie auf die Schaltfläche Gefällt mir klicken.
Um eine Likes-Komponente auf React zu erstellen, können Sie Funktionskomponenten oder Klassenkomponenten verwenden. Es wird empfohlen, Klassenkomponenten zu verwenden, da sie über mehr Funktionen und Erweiterbarkeit verfügen. In einer Klassenkomponente können Sie einen Status mit einer Methode erstellen constructor und bestimmen Sie die Methoden, die den Status aktualisieren, wenn Sie auf die Schaltfläche Gefällt mir klicken.
Verwenden von React-Komponenten
Um eine Komponente in React zu erstellen, müssen Sie eine Klasse oder Funktion erstellen, die ein React-Element zurückgibt. In der Komponentenklasse können Sie den Status und die Methoden definieren, die mit diesem Status interagieren.
Sie können Komponenten verwenden, um eine Hierarchie zu erstellen, in der jede Komponente andere Komponenten enthalten kann. Auf diese Weise können Sie modularen und leicht zu wartenden Code erstellen.
React bietet viele integrierte Komponenten wie Formularelemente, Schaltflächen, Listen und andere. Entwickler können jedoch auch eigene Komponenten erstellen, um sie an ihre Bedürfnisse anzupassen.
Mithilfe von React-Komponenten können Sie eine dynamische und interaktive Benutzeroberfläche erstellen. Komponenten können ihren Status während der Benutzerinteraktion aktualisieren, sodass Sie die aktuellen Informationen auf der Seite anzeigen können, ohne sie neu zu laden.
Es ist wichtig zu verstehen, dass die Verwendung von React-Komponenten einige grundlegende Kenntnisse über JavaScript und die React-Syntax erfordert. Nachdem Sie jedoch die grundlegenden Konzepte von React untersucht haben, können Sie leistungsstarke und flexible Schnittstellen mit Komponenten erstellen.
Einen Status für Likes erstellen
Um die Likes-Funktionalität auf React zu implementieren, müssen Sie einen Status erstellen, der die Anzahl der Likes überwacht.
Zunächst importieren wir den useState-Hook aus der React-Bibliothek:
import React, < useState >from 'react';
Erstellen Sie dann eine Funktionskomponente und verwenden Sie den useState-Hook, um einen Likes-Status zu erstellen:
function Likes() const [likes, setLikes] = useState(0);
// beschreibung der übrigen Komponentenlogik
>
Im obigen Code haben wir eine Likes-Variable erstellt, die die aktuelle Likes-Anzahl speichert, und eine setLikes-Funktion, mit der Sie diese Anzahl aktualisieren können.
Jetzt können Sie die Likes-Variable in der Likes-Komponente verwenden, um die Anzahl der Likes anzuzeigen:
Auf diese Weise aktualisiert React jedes Mal, wenn der Status aktualisiert wird, die Komponente automatisch und zeigt die aktuelle Anzahl an Likes an.
Hinzufügen eines Ereignishandlers für Likes
Um der React-Anwendung die Likes-Funktionalität hinzuzufügen und einen Ereignishandler zu implementieren, benötigen wir:
| 1. | Erstellen Sie eine Komponente, die das Gefällt Mir darstellt. |
| 2. | Fügen Sie einen Status hinzu, um die aktuelle Anzahl der Likes zu speichern. |
| 3. | Definieren Sie die Ereignishandlerfunktion, indem Sie auf die Schaltfläche "Gefällt mir" klicken. |
| 4. | Verknüpfen Sie die Ereignishandlerfunktion mit der Schaltfläche "Gefällt mir". |
Hier ist ein Beispielcode, der zeigt, wie Sie in React einen Ereignishandler für Likes hinzufügen:
import React, < useState >from 'react';const LikeButton = () => return ( );>export default LikeButton;
In diesem Beispiel erstellen wir eine LikeButton-Komponente, in der wir mithilfe des useState-Hooks eine Likes-Variable deklarieren, um die Anzahl der Likes zu speichern. Dann definieren wir eine handleLikeClick-Handlerfunktion, die die Anzahl der Likes bei jedem Klick auf die Likes-Schaltfläche um 1 erhöht. Schließlich verknüpfen wir die Ereignishandlerfunktion mithilfe des onClick-Attributs mit der Schaltfläche "Gefällt mir".
Wenn der Benutzer nun auf die Schaltfläche Gefällt mir klickt, wird die Anzahl der Likes in der Komponente automatisch aktualisiert und auf der Seite angezeigt.
Zeigt die Anzahl der Likes an
Um die Anzahl der Likes auf React anzuzeigen, müssen Sie einen Status für die Anzahl der Likes erstellen. Beginnen Sie mit dem Importieren des useState-Hooks:
import React, < useState >from 'react';Deklarieren Sie dann eine Zustandsvariable und eine Funktion, die ihren Wert ändert:
const [likes, setLikes] = useState(0);Im obigen Beispiel wird der Anfangswert des Zustands auf Null gesetzt. Dann können Sie die Zustandsvariable in JSX verwenden, um die Anzahl der Likes anzuzeigen:
Количество лайков:
In diesem Beispiel wird der Wert der Statusvariablen innerhalb des Tags "strong" angezeigt, um sie hervorzuheben. Sie können auch eine Textbeschreibung mit dem em-Tag hinzufügen:
Всего лайков: пользователей понравилось.
Wenn Sie nun den Wert der Statusvariablen mit der setLikes-Funktion aktualisieren, wird die Schnittstelle automatisch aktualisiert und die neue Anzahl an Likes angezeigt:
In diesem Beispiel wird der Wert der Statusvariablen jedes Mal, wenn ein Benutzer auf die Schaltfläche "Gefällt mir" klickt, um 1 erhöht.
