Fügen Sie Ihrer React.js-App Popup-Effekte hinzu

Pop-ups sind eine großartige Möglichkeit, die Aufmerksamkeit Ihrer Benutzer zu erregen und wichtige Informationen anzuzeigen. Sie können sie für Dinge wie Bestätigungsmeldungen und Fehlermeldungen verwenden. Oder Sie können sie einfach verwenden, um zusätzliche Informationen zu einem Element auf einer Seite anzuzeigen.

In React gibt es zwei Möglichkeiten, Popups zu erstellen: mit React-Hooks oder mit einem externen Modul.

So erstellen Sie Pop-ups in React.js

Erste, Erstellen Sie eine einfache Reaktions-App. Danach können Sie ein Popup mit einer von zwei Methoden hinzufügen. Sie können React-Hooks oder ein externes Modul verwenden.

1. React Hooks verwenden

Der Hooks-Ansatz ist einfacher und erfordert nur wenige Codezeilen.

Zuerst müssen Sie eine Funktion erstellen, die das Popup öffnet. Sie können diese Funktion in der Komponente definieren, die das Popup anzeigt.

Als Nächstes müssen Sie den useState-Hook verwenden, um eine Zustandsvariable für das Popup zu erstellen. Mit dieser Zustandsvariable können Sie bestimmen, ob das Popup geöffnet sein soll oder nicht.

Schließlich müssen Sie Ihrer Komponente eine Schaltfläche hinzufügen, die das Popup auslöst. Wenn Sie auf diese Schaltfläche klicken, setzen Sie die Zustandsvariable auf wahr, wodurch das Popup angezeigt wird.

Sehen Sie sich den Code für diesen Ansatz an:

importieren Reagieren, { useState } aus 'reagieren';
FunktionBeispiel() {
konst [isOpen, setIsOpen] = useState(FALSCH);
zurückkehren (
<div>
<Schaltfläche onClick={() => setIsOpen (wahr)}>
 Pop-up öffnen
</button>
{ist offen && (
<div>
<div>
 Das Ist den Inhalt des Popups.
</div>
<Schaltfläche onClick={() => setIsOpen (false)}>
 Popup schließen
</button>
</div>
 )}
</div>
 );
}
ExportStandard Beispiel;

Zuerst importiert dieser Code den useState-Hook aus der Core-React-Bibliothek. Dann verwendet die Example-Funktion den useState-Hook, um eine Zustandsvariable mit dem Namen isOpen zu erstellen. Diese Zustandsvariable bestimmt, ob das Popup geöffnet sein soll oder nicht.

Als Nächstes fügen Sie der Komponente, die das Popup auslöst, eine Schaltfläche hinzu. Wenn Sie auf diese Schaltfläche klicken, wird die Zustandsvariable auf wahr gesetzt, wodurch das Popup angezeigt wird.

Fügen Sie schließlich der Komponente eine Schaltfläche hinzu, die das Popup schließt. Wenn Sie auf diese Schaltfläche klicken, wird die Zustandsvariable auf „false“ gesetzt, wodurch das Popup verschwindet.

2. Verwenden eines externen Moduls

Sie können Pop-ups in React auch mit einem externen Modul erstellen. Es stehen viele Module zur Verfügung, die Sie für diesen Zweck verwenden können.

Ein beliebtes Modul ist React-Modal. React-Modal ist ein einfaches und leichtgewichtiges Modul, mit dem Sie modale Dialoge in React erstellen können.

Um React-Modal zu verwenden, müssen Sie es zuerst mit npm installieren:

npm Installieren reagieren-modal

Sobald Sie React-Modal installiert haben, können Sie es in Ihre React-Komponente importieren:

importieren ReactModal aus 'reaktionsmodal';
importieren Reagieren, { useState } aus 'reagieren';
FunktionBeispiel() {
konst [isOpen, setIsOpen] = useState(FALSCH);
zurückkehren (
<div>
<Schaltfläche onClick={setIsOpen}>Modal öffnen</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Beispiel Modal"
>
 Das Ist der Inhalt des Modals.
</ReactModal>
</div>
 );
}
ExportStandard Beispiel;

In diesem Code verwenden Sie immer noch die React-Hooks, aber mit dem React-Modal-Modul. Mit dem React-Modal-Modul können Sie dem Popup weitere Funktionen hinzufügen. Wie Sie sehen können, ist der Code dem vorherigen Ansatz sehr ähnlich. Der einzige Unterschied besteht darin, dass Sie jetzt die ReactModal-Komponente von React-Modal verwenden, anstatt Ihre eigene zu erstellen.

Zuerst müssen Sie das React-Modal-Modul importieren. Anschließend verwenden Sie die ReactModal-Komponente, um den Inhalt Ihres Popups einzuschließen. Verwenden Sie die Eigenschaft isOpen, um zu bestimmen, ob das Modal geöffnet sein soll oder nicht.

Nachdem Sie Ihr Pop-up erstellt haben, möchten Sie ihm möglicherweise zusätzliche Funktionen hinzufügen. Beispielsweise möchten Sie möglicherweise das Popup schließen, wenn der Benutzer außerhalb davon klickt.

Dazu müssen Sie die Eigenschaft onRequestClose der React-Modal-Komponente verwenden. Diese Requisite nimmt eine Funktion als Wert an. Diese Funktion wird ausgeführt, wenn der Benutzer außerhalb des Modals klickt.

Um beispielsweise das Pop-up zu schließen, wenn der Benutzer außerhalb davon klickt, würden Sie den folgenden Code verwenden:

importieren Reagieren, { useState } aus 'reagieren';
importieren ReactModal aus 'reaktionsmodal';
FunktionBeispiel() {
konst [isOpen, setIsOpen] = useState(FALSCH);
zurückkehren (
<div>
<Schaltfläche onClick={() => setIsOpen (wahr)}>
 Modal öffnen
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Beispiel Modal"
 onRequestClose={() => setIsOpen(FALSCH)}
>
 Das Ist der Inhalt des Modals.
</ReactModal>
</div>
 );
}
ExportStandard Beispiel;

Die Funktion, die wir an die Eigenschaft onRequestClose übergeben, setzt einfach die Zustandsvariable isOpen auf false. Dadurch wird das Modal geschlossen.

Sie können der ReactModal-Komponente auch andere Requisiten hinzufügen, um sie weiter anzupassen. Eine vollständige Liste der Requisiten finden Sie in der React-Modal-Dokumentation.

Styling in Pop-ups hinzufügen

Nachdem Sie Ihr Pop-up erstellt haben, möchten Sie ihm vielleicht ein Styling hinzufügen. Es gibt viele Möglichkeiten, React-Komponenten zu gestalten, aber wir konzentrieren uns auf Inline-Stile.

Inline-Stile sind Stile, die Sie direkt zu einer React-Komponente hinzufügen können. Um Inline-Stile hinzuzufügen, müssen Sie die style-Eigenschaft verwenden. Diese Eigenschaft nimmt ein Objekt als Wert an, wobei die Schlüssel die Stileigenschaften und die Werte die Stilwerte sind.

Um beispielsweise einem Pop-up eine Hintergrundfarbe von Weiß und eine Breite von 500 Pixel hinzuzufügen, würden Sie den folgenden Code verwenden:

importieren Reagieren aus 'reagieren';
FunktionBeispiel() {
zurückkehren (
<div style={{ Hintergrundfarbe: 'Weiss', Breite: '500px' }}>
 Das Ist den Inhalt des Popups.
</div>
 );
}
ExportStandard Beispiel;

In diesem Code fügen Sie dem div-Element die Eigenschaft style mit den Eigenschaften backgroundColor und width hinzu. Du kannst auch Verwenden Sie Tailwind CSS in der React-App um Ihre Popups zu gestalten.

Erhöhen Sie die Konversionsrate mit Pop-ups

Pop-ups können helfen, die Konversionsraten zu erhöhen, indem sie dem Benutzer wichtige Informationen anzeigen. Sie können beispielsweise ein Popup verwenden, um einen Rabattcode oder ein Sonderangebot anzuzeigen. Sie können auch ein Popup verwenden, um E-Mail-Adressen für Ihren Newsletter zu sammeln. Das Hinzufügen eines Pop-ups zu Ihrer React-App ist eine großartige Möglichkeit, die Konversionsraten zu erhöhen.

Sie können Ihre React-Anwendung auch einfach kostenlos auf GitHub-Seiten bereitstellen.