Τα στοιχεία React ενθαρρύνουν καλές πρακτικές, αλλά μπορεί να είναι πολύ περιοριστικά. Μάθετε πώς να σπάσετε το καλούπι.

Βασικά Takeaways

  • Οι πύλες React σάς επιτρέπουν να αποδίδετε το περιεχόμενο ενός στοιχείου εκτός της ιεραρχίας του γονικού στοιχείου, καθιστώντας το χρήσιμο για στοιχεία διεπαφής χρήστη, όπως modals και επικαλύψεις.
  • Οι πύλες μπορούν να χρησιμοποιηθούν σε διάφορα σενάρια, όπως modals, ενσωματώσεις τρίτων, μενού περιβάλλοντος και συμβουλές εργαλείων, επιτρέποντας την ευέλικτη απόδοση σε διαφορετικές τοποθεσίες DOM.
  • Χρησιμοποιώντας το React Portal, μπορείτε να διαχωρίσετε τις ανησυχίες της διεπαφής χρήστη από το κύριο δέντρο στοιχείων, να βελτιώσετε τη δυνατότητα συντήρησης του κώδικα και να ελέγχετε εύκολα τον δείκτη z των στοιχείων για τη στρώση και τη στοίβαξη στοιχείων διεπαφής χρήστη.

Οι σύγχρονες εφαρμογές Ιστού χρειάζονται διεπαφές που διαθέτουν στοιχεία όπως modals και συμβουλές εργαλείων. Ωστόσο, αυτά τα στοιχεία διεπαφής χρήστη ενδέχεται να μην ενσωματώνονται πάντα καλά με την υπάρχουσα δομή στοιχείων.

instagram viewer

Το React προσφέρει λύση σε αυτό το πρόβλημα μέσω μιας δυνατότητας που ονομάζεται Portals.

Τι είναι οι πύλες React;

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

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

Χρήσεις για πύλες React

Τα React Portal είναι χρήσιμα σε διάφορα σενάρια:

  • Τρόποι και επικαλύψεις. Όταν χρειάζεται να εμφανίσετε διαλόγους ή επικαλύψεις, αποδώστε τους στο ανώτερο επίπεδο του DOM. Αυτό διασφαλίζει ότι τα στυλ ή η διάταξη των γονιών τους δεν τους περιορίζουν.
  • Ενσωματώσεις τρίτων. Κατά την ενσωμάτωση βιβλιοθηκών τρίτων που προβλέπουν απόδοση σε συγκεκριμένες τοποθεσίες DOM.
  • Μενού περιβάλλοντος. Δημιουργία μενού περιβάλλοντος που ανταποκρίνονται στις αλληλεπιδράσεις των χρηστών, που πρέπει να τοποθετήσετε σε σχέση με τη θύρα προβολής ή ένα συγκεκριμένο στοιχείο DOM.
  • Tooltips και popovers. Κατά την απόδοση συμβουλών εργαλείων ή popover που πρέπει να εμφανίζονται πάνω από άλλα στοιχεία, ανεξάρτητα από τη θέση τους στο δέντρο στοιχείων.

Πώς λειτουργούν οι πύλες React

Παραδοσιακά, όταν αποδίδετε ένα στοιχείο στο React, συνδέετε την έξοδο του στον κόμβο DOM του γονικού στοιχείου. Αυτό λειτουργεί καλά για τα περισσότερα σενάρια, αλλά γίνεται περιοριστικό όταν χρειάζεται να αποδώσετε περιεχόμενο εκτός της ιεραρχίας του γονέα.

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

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

Το React Portal αντιμετωπίζει αυτόν τον περιορισμό, επιτρέποντάς σας να καθορίσετε ένα στοιχείο DOM-στόχου όπου θα πρέπει να αποδίδεται η έξοδος ενός στοιχείου.

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

Πώς να χρησιμοποιήσετε τις πύλες React

Τα Modal είναι ένα τέλειο παράδειγμα του πότε μπορείτε να χρησιμοποιήσετε το React Portal. Αυτό το δείγμα κώδικα εξηγεί τη διαδικασία.

Ρυθμίστε μια Βασική εφαρμογή React

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

Δημιουργήστε μια πύλη για Modals

Για να δημιουργήσετε μια πύλη, χρησιμοποιήστε το ReactDOM.createPortal() λειτουργία. Χρειάζονται δύο ορίσματα: το περιεχόμενο που θέλετε να αποδώσετε και μια αναφορά στον κόμβο DOM για να το αποδώσετε.

Σε αυτό το παράδειγμα, το στοιχείο Modal αποδίδει τα παιδιά του χρησιμοποιώντας μια πύλη. Το περιεχόμενο θα εμφανίζεται στο στοιχείο DOM με το αναγνωριστικό «ρίζα».

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Μπορείτε να ορίσετε τα περιεχόμενα ενός συγκεκριμένου Modal σε ένα συγκεκριμένο στοιχείο. Για παράδειγμα, αυτό το στοιχείο ModalContent περιέχει μια παράγραφο και α Κλείσε κουμπί:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Στη συνέχεια, μπορείτε να ανοίξετε το Modal κάνοντας κλικ στο κουμπί που ορίζεται στο App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

Σε αυτό το παράδειγμα, το στοιχείο Modal αποδίδει το περιεχόμενό του χρησιμοποιώντας μια πύλη, αποκομμένη από την ιεραρχία του κύριου στοιχείου.

Παραδείγματα πραγματικού κόσμου

Οι πύλες React είναι χρήσιμες σε διάφορες καθημερινές καταστάσεις.

  • Σύστημα ειδοποιήσεων: Πότε δημιουργία συστήματος ειδοποιήσεων, συχνά θέλετε μηνύματα στο επάνω μέρος της οθόνης, ανεξάρτητα από το πού βρίσκεται το τρέχον στοιχείο.
  • Μενού περιβάλλοντος: Τα μενού περιβάλλοντος πρέπει να εμφανίζονται κοντά στο σημείο όπου κάνει κλικ ο χρήστης, ανεξάρτητα από το πού βρίσκεται στην ιεραρχία του DOM.
  • Ενσωμάτωση τρίτων: Οι βιβλιοθήκες τρίτων πρέπει συχνά να στοχεύουν αυθαίρετα μέρη του DOM.

Βέλτιστες πρακτικές για χρήση πύλης

Για να αξιοποιήσετε στο έπακρο τα React Portal, ακολουθήστε αυτές τις συμβουλές:

  • Επιλέξτε τις σωστές περιπτώσεις: Οι πύλες είναι ευέλικτες, αλλά δεν τις χρειάζονται όλα. Χρησιμοποιήστε πύλες όταν η τακτική απόδοση προκαλεί προβλήματα ή συγκρούσεις.
  • Διατηρήστε το περιεχόμενο της πύλης ξεχωριστό: Όταν αποδίδετε περιεχόμενο μέσω πυλών, βεβαιωθείτε ότι είναι αυτόνομο. Δεν θα πρέπει να βασίζεται σε γονικά στυλ ή περιβάλλον.
  • Διαχείριση συμβάντων και ενεργειών: Με τις πύλες, τα συμβάντα λειτουργούν κάπως διαφορετικά λόγω του αποκομμένου περιεχομένου. Χειριστείτε σωστά τη διάδοση γεγονότων και τις ενέργειες.

Οφέλη από τις πύλες React

Τα React Portal προσφέρουν πολλά πλεονεκτήματα που μπορούν να βελτιώσουν την ανάπτυξη πολύπλοκων διεπαφών χρήστη. Αυτοί:

  • Βοηθήστε να διαχωρίσετε τις ανησυχίες της διεπαφής χρήστη από το κύριο δέντρο στοιχείων, βελτιώνοντας τη συντηρησιμότητα και την αναγνωσιμότητα του κώδικα.
  • Παρέχετε ευελιξία για στοιχεία που πρέπει να εμφανίζονται εκτός του μητρικού τους στοιχείου.
  • Διευκολύνετε τη δημιουργία modals και επικαλύψεων που είναι ξεχωριστά από την υπόλοιπη διεπαφή χρήστη.
  • Σας επιτρέπει να ελέγχετε εύκολα τον δείκτη z των στοιχείων, διασφαλίζοντας ότι μπορείτε να στρώσετε και να στοιβάζετε τα στοιχεία διεπαφής χρήστη σας.

Πιθανές παγίδες και προβληματισμοί

Αν και τα React Portal είναι χρήσιμα, έχετε υπόψη σας τα εξής:

  • Ζητήματα CSS: Οι πύλες μπορούν να προκαλέσουν απροσδόκητη συμπεριφορά στυλ CSS, καθώς τοποθετούν περιεχόμενο εκτός γονικών στοιχείων. Χρησιμοποιήστε καθολικά στυλ ή διαχειριστείτε το εύρος CSS προσεκτικά.
  • Προσβασιμότητα: Όταν χρησιμοποιείτε πύλες για την απόδοση περιεχομένου, θυμηθείτε να διατηρήσετε ανέπαφες τις λειτουργίες προσβασιμότητας, όπως η πλοήγηση με πληκτρολόγιο και η συμβατότητα με πρόγραμμα ανάγνωσης οθόνης.
  • Απόδοση από την πλευρά του διακομιστή: Οι πύλες ενδέχεται να μην συνδυάζονται καλά με απόδοση από την πλευρά του διακομιστή (SSR). Κατανοήστε τα αποτελέσματα και τους περιορισμούς της χρήσης πυλών σε ρυθμίσεις SSR.

Propelling UI Beyond the Norm

Τα React Portal προσφέρουν μια ισχυρή λύση για τον χειρισμό περίπλοκων καταστάσεων διεπαφής χρήστη που χρειάζονται περιεχόμενο για να εμφανίζεται πέρα ​​από τα όρια των γονικών στοιχείων.

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

Είτε δημιουργείτε modals είτε εισάγετε βιβλιοθήκες τρίτων, το React Portal παρέχει μια ισχυρή απάντηση για την αντιμετώπιση απαιτητικών αναγκών διεπαφής χρήστη.