Προσθέστε εφέ αναδυόμενων παραθύρων στην εφαρμογή React.js

Τα αναδυόμενα παράθυρα είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή του χρήστη σας και να εμφανίσετε σημαντικές πληροφορίες. Μπορείτε να τα χρησιμοποιήσετε για πράγματα όπως μηνύματα επιβεβαίωσης και μηνύματα σφάλματος. Ή μπορείτε απλώς να τα χρησιμοποιήσετε για να εμφανίσετε επιπλέον πληροφορίες σχετικά με ένα στοιχείο σε μια σελίδα.

Στο React, υπάρχουν δύο τρόποι για να δημιουργήσετε αναδυόμενα παράθυρα: χρησιμοποιώντας γάντζους React ή χρησιμοποιώντας εξωτερική μονάδα.

Πώς να δημιουργήσετε αναδυόμενα παράθυρα στο React.js

Πρώτα, δημιουργήστε μια απλή εφαρμογή react. Μετά από αυτό, μπορείτε να προσθέσετε ένα αναδυόμενο παράθυρο χρησιμοποιώντας μία από τις δύο μεθόδους. Μπορείτε να χρησιμοποιήσετε τα άγκιστρα React ή μια εξωτερική μονάδα.

1. Χρήση React Hooks

Η προσέγγιση των hooks είναι απλούστερη και απαιτεί μόνο μερικές γραμμές κώδικα.

Πρώτα, πρέπει να δημιουργήσετε μια συνάρτηση που θα ανοίξει το αναδυόμενο παράθυρο. Μπορείτε να ορίσετε αυτή τη λειτουργία στο στοιχείο που θα εμφανίσει το αναδυόμενο παράθυρο.

Στη συνέχεια, πρέπει να χρησιμοποιήσετε το άγκιστρο useState για να δημιουργήσετε μια μεταβλητή κατάστασης για το αναδυόμενο παράθυρο. Μπορείτε να χρησιμοποιήσετε αυτήν τη μεταβλητή κατάστασης για να προσδιορίσετε εάν το αναδυόμενο παράθυρο πρέπει να είναι ανοιχτό ή όχι.

Τέλος, πρέπει να προσθέσετε ένα κουμπί στο στοιχείο σας που θα ενεργοποιήσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, ορίστε τη μεταβλητή κατάστασης σε true, κάτι που θα προκαλέσει την εμφάνιση του αναδυόμενου παραθύρου.

Ρίξτε μια ματιά στον κώδικα για αυτήν την προσέγγιση:

εισαγωγή React, { useState } από 'αντιδρώ';
λειτουργίαΠαράδειγμα() {
συνθ [isOpen, setIsOpen] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (
<div>
<κουμπί onClick={() => setIsOpen (αληθές)}>
 Ανοίξτε το αναδυόμενο παράθυρο
</button>
{είναι ανοιχτό && (
<div>
<div>
 Αυτό είναι το περιεχόμενο του αναδυόμενου παραθύρου.
</div>
<κουμπί onClick={() => setIsOpen (false)}>
 Κλείσιμο αναδυόμενου παραθύρου
</button>
</div>
 )}
</div>
 );
}
εξαγωγήΠροκαθορισμένο Παράδειγμα;

Πρώτον, αυτός ο κώδικας εισάγει το άγκιστρο useState από τη βιβλιοθήκη core react. Στη συνέχεια, η συνάρτηση Παράδειγμα χρησιμοποιεί το άγκιστρο useState για να δημιουργήσει μια μεταβλητή κατάστασης που ονομάζεται isOpen. Αυτή η μεταβλητή κατάστασης καθορίζει εάν το αναδυόμενο παράθυρο πρέπει να είναι ανοιχτό ή όχι.

Στη συνέχεια, προσθέστε ένα κουμπί στο στοιχείο που θα ενεργοποιήσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, η μεταβλητή κατάστασης θα οριστεί σε true, κάτι που θα προκαλέσει την εμφάνιση του αναδυόμενου παραθύρου.

Τέλος, προσθέστε ένα κουμπί στο στοιχείο που θα κλείσει το αναδυόμενο παράθυρο. Όταν κάνετε κλικ σε αυτό το κουμπί, η μεταβλητή κατάστασης θα οριστεί σε false, γεγονός που θα προκαλέσει την εξαφάνιση του αναδυόμενου παραθύρου.

2. Χρήση εξωτερικής μονάδας

Μπορείτε επίσης να δημιουργήσετε αναδυόμενα παράθυρα στο React χρησιμοποιώντας μια εξωτερική μονάδα. Υπάρχουν πολλές διαθέσιμες ενότητες που μπορείτε να χρησιμοποιήσετε για αυτό το σκοπό.

Ένα δημοφιλές module είναι το react-modal. Το react-modal είναι μια απλή και ελαφριά λειτουργική μονάδα που σας επιτρέπει να δημιουργείτε modal διαλόγους στο React.

Για να χρησιμοποιήσετε το react-modal, πρέπει πρώτα να το εγκαταστήσετε χρησιμοποιώντας npm:

npm εγκαθιστώ αντιδρώ-τροπικός

Αφού εγκαταστήσετε το react-modal, μπορείτε να το εισαγάγετε στο στοιχείο React:

εισαγωγή ReactModal από «react-modal»·
εισαγωγή React, { useState } από 'αντιδρώ';
λειτουργίαΠαράδειγμα() {
συνθ [isOpen, setIsOpen] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (
<div>
<κουμπί onClick={setIsOpen}>Άνοιγμα Modal</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Παράδειγμα Modal"
>
 Αυτό είναι το περιεχόμενο του τροπικού.
</ReactModal>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Παράδειγμα;

Σε αυτόν τον κώδικα, εξακολουθείτε να χρησιμοποιείτε τα άγκιστρα React αλλά με τη λειτουργική μονάδα react-modal. Με τη λειτουργική μονάδα react-modal, μπορείτε να προσθέσετε περισσότερη λειτουργικότητα στο αναδυόμενο παράθυρο. Όπως μπορείτε να δείτε, ο κώδικας είναι πολύ παρόμοιος με την προηγούμενη προσέγγιση. Η μόνη διαφορά είναι ότι τώρα χρησιμοποιείτε το στοιχείο ReactModal από το react-modal αντί να δημιουργείτε το δικό σας.

Πρώτα, πρέπει να εισαγάγετε τη λειτουργική μονάδα react-modal. Στη συνέχεια, χρησιμοποιείτε το στοιχείο ReactModal για να αναδιπλώσετε το περιεχόμενο του αναδυόμενου παραθύρου. Χρησιμοποιήστε το στηρίγμα isOpen για να προσδιορίσετε εάν το modal θα πρέπει να είναι ανοιχτό ή όχι.

Αφού δημιουργήσετε το αναδυόμενο παράθυρο, ίσως θελήσετε να προσθέσετε επιπλέον λειτουργίες σε αυτό. Για παράδειγμα, μπορεί να θέλετε να κλείσετε το αναδυόμενο παράθυρο όταν ο χρήστης κάνει κλικ έξω από αυτό.

Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε την υποστήριξη onRequestClose του στοιχείου react-modal. Αυτό το στήριγμα παίρνει μια συνάρτηση ως τιμή του. Αυτή η λειτουργία θα εκτελείται όταν ο χρήστης κάνει κλικ εκτός του modal.

Για παράδειγμα, για να κλείσετε το αναδυόμενο παράθυρο όταν ο χρήστης κάνει κλικ έξω από αυτό, θα χρησιμοποιήσετε τον ακόλουθο κώδικα:

εισαγωγή React, { useState } από 'αντιδρώ';
εισαγωγή ReactModal από «react-modal»·
λειτουργίαΠαράδειγμα() {
συνθ [isOpen, setIsOpen] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (
<div>
<κουμπί onClick={() => setIsOpen (αληθές)}>
 Άνοιγμα Modal
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Παράδειγμα Modal"
 onRequestClose={() => setIsOpen(ψευδής)}
>
 Αυτό είναι το περιεχόμενο του τροπικού.
</ReactModal>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Παράδειγμα;

Η συνάρτηση που μεταβιβάζουμε στη βάση onRequestClose απλώς ορίζει τη μεταβλητή κατάστασης isOpen σε false. Αυτό θα προκαλέσει το κλείσιμο του modal.

Μπορείτε επίσης να προσθέσετε άλλα στηρίγματα στο στοιχείο ReactModal για να το προσαρμόσετε περαιτέρω. Για μια πλήρη λίστα με τα στηρίγματα, μπορείτε να δείτε την τεκμηρίωση του react-modal.

Προσθήκη στυλ σε αναδυόμενα παράθυρα

Αφού δημιουργήσετε το αναδυόμενο παράθυρο, ίσως θέλετε να προσθέσετε κάποιο στυλ σε αυτό. Υπάρχουν πολλοί τρόποι για να διαμορφώσετε τα στοιχεία του React, αλλά θα επικεντρωθούμε στα ενσωματωμένα στυλ.

Τα ενσωματωμένα στυλ είναι στυλ που μπορείτε να προσθέσετε απευθείας σε ένα στοιχείο React. Για να προσθέσετε ενσωματωμένα στυλ, πρέπει να χρησιμοποιήσετε την ιδιότητα στυλ. Αυτή η ιδιότητα παίρνει ένα αντικείμενο ως τιμή, όπου τα κλειδιά είναι οι ιδιότητες στυλ και οι τιμές είναι οι τιμές στυλ.

Για παράδειγμα, για να προσθέσετε ένα λευκό χρώμα φόντου και πλάτος 500 εικονοστοιχείων σε ένα αναδυόμενο παράθυρο, θα χρησιμοποιήσετε τον ακόλουθο κώδικα:

εισαγωγή Αντιδρώ από 'αντιδρώ';
λειτουργίαΠαράδειγμα() {
ΕΠΙΣΤΡΟΦΗ (
<div style={{ backgroundColor: 'άσπρο', πλάτος: '500 px' }}>
 Αυτό είναι το περιεχόμενο του αναδυόμενου παραθύρου.
</div>
 );
}
εξαγωγήΠροκαθορισμένο Παράδειγμα;

Σε αυτόν τον κώδικα, προσθέτετε την ιδιότητα στυλ στο στοιχείο div με τις ιδιότητες backgroundColor και width. Μπορείτε επίσης να χρησιμοποιήστε το Tailwind CSS στην εφαρμογή react για το στυλ των αναδυόμενων παραθύρων σας.

Αυξήστε το ποσοστό μετατροπής με αναδυόμενα παράθυρα

Τα αναδυόμενα παράθυρα μπορούν να βοηθήσουν στην αύξηση των ποσοστών μετατροπών εμφανίζοντας σημαντικές πληροφορίες στον χρήστη. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε ένα αναδυόμενο παράθυρο για να εμφανίσετε έναν εκπτωτικό κωδικό ή μια ειδική προσφορά. Μπορείτε επίσης να χρησιμοποιήσετε ένα αναδυόμενο παράθυρο για τη συλλογή διευθύνσεων email για το ενημερωτικό δελτίο σας. Η προσθήκη ενός αναδυόμενου παραθύρου στην εφαρμογή React είναι ένας πολύ καλός τρόπος για να αυξήσετε τα ποσοστά μετατροπών.

Μπορείτε επίσης να αναπτύξετε εύκολα την εφαρμογή React σας δωρεάν σε σελίδες GitHub.