Компонентите на React насърчават добрите практики, но могат да бъдат твърде ограничаващи. Научете как да разчупите мухъла.
Ключови изводи
- Порталите на React ви позволяват да визуализирате съдържанието на компонент извън йерархията на неговия родителски компонент, което го прави полезен за UI елементи като модални и наслагвания.
- Порталите могат да се използват в различни сценарии като модални, интеграции на трети страни, контекстни менюта и подсказки, което позволява гъвкаво изобразяване на различни местоположения на DOM.
- С помощта на React Portals можете да отделите проблемите на UI от основното дърво на компонентите, да подобрите поддържаемостта на кода и лесно да контролирате z-индекса на компонентите за наслояване и подреждане на UI елементи.
Съвременните уеб приложения се нуждаят от интерфейси, които включват елементи като модални и подсказки. Но тези компоненти на потребителския интерфейс може не винаги да се интегрират добре със съществуващата компонентна структура.
React предлага решение на този проблем чрез функция, наречена Portals.
Какво представляват React порталите?
React Portals предоставят начин за изобразяване на съдържанието на компонент извън йерархията на неговия родителски компонент. С други думи, те ви позволяват да изобразите изхода на компонент в различен DOM елемент, който не е дете на текущия компонент.
Тази функция е удобна, когато работите с компоненти на потребителския интерфейс, които трябва да се рендират на по-високо ниво в DOM, като модални или наслагвания.
Използва се за React Portals
Порталите на React са полезни в различни сценарии:
- Модали и наслагвания. Когато трябва да покажете модални диалози или наслагвания, изобразете ги на най-високото ниво на DOM. Това гарантира, че стиловете или оформлението на техните родители не ги ограничават.
- Интеграции на трети страни. При интегриране на библиотеки на трети страни, които предвиждат изобразяване на конкретни DOM местоположения.
- Контекстни менюта. Създаване на контекстни менюта, които отговарят на потребителските взаимодействия, които трябва да позиционирате спрямо прозореца за изглед или конкретен DOM елемент.
- Подсказки и изскачащи съобщения. При изобразяване на подсказки или изскачащи елементи, които трябва да се показват върху други компоненти, независимо от позицията им в дървото на компонентите.
Как работят порталите на React
Традиционно, когато визуализирате компонент в React, вие прикачвате неговия изход към DOM възела на родителския компонент. Това работи добре за повечето сценарии, но става ограничаващо, когато трябва да изобразите съдържание извън йерархията на родителя.
Да предположим, че създавате модален диалог. По подразбиране ще поставите съдържанието на модала в DOM възел на родителския компонент.
Това може да доведе до конфликти на стилове и друго нежелано поведение, тъй като съдържанието на модала наследява стиловете и ограниченията на своите родителски компоненти.
Порталите на React се справят с това ограничение, като ви позволяват да посочите целеви DOM елемент, където изходът на компонента трябва да се визуализира.
Това означава, че можете да изобразите всеки UI елемент извън йерархията на DOM на родителя, освобождавайки се от ограниченията на стиловете и оформлението на родителя.
Как да използвате React Portals
Модалните са перфектен пример за това кога можете да използвате React Portals. Този примерен код обяснява процедурата.
Настройте основно приложение React
Преди да създадете портал, уверете се, че имате настроено основно приложение React. Можеш да използваш инструменти като Create React App за бързо скеле на проект.
Създайте портал за модали
За да създадете портал, използвайте ReactDOM.createPortal() функция. Необходими са два аргумента: съдържанието, което искате да изобразите, и препратка към DOM възела, в който да го изобразите.
В този пример модалният компонент изобразява своите деца с помощта на портал. Съдържанието ще се появи в DOM елемента с ID „root“.
// Modal.js
import ReactDOM from"react-dom";const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;
Можете да дефинирате съдържанието на конкретен модал в конкретен компонент. Например този компонент ModalContent съдържа параграф и a Близо бутон:
// 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;
В този пример модалният компонент изобразява съдържанието си с помощта на портал, отделен от йерархията на главния компонент.
Примери от реалния свят
React Portals са полезни в различни ежедневни ситуации.
- Система за уведомяване: Кога създаване на система за уведомяване, често искате съобщения в горната част на екрана, независимо къде е текущият компонент.
- Контекстно меню: Контекстните менюта трябва да изскачат близо до мястото, където потребителят щракне, независимо къде е това в йерархията на DOM.
- Интеграция на трети страни: Библиотеките на трети страни често трябва да се насочат към произволни части от DOM.
Най-добри практики за използване на портала
За да извлечете максимума от React Portals, следвайте тези съвети:
- Изберете правилните случаи: Порталите са гъвкави, но не всичко се нуждае от тях. Използвайте портали, когато редовното изобразяване причинява проблеми или сблъсъци.
- Съхранявайте съдържанието на портала отделно: Когато изобразявате съдържание през портали, уверете се, че то е самостоятелно. Не трябва да разчита на родителски стилове или контекст.
- Управление на събития и действия: С порталите събитията работят малко по-различно поради отделеното съдържание. Обработвайте правилно разпространението на събития и действията.
Предимства на React Portals
React Portals предлагат няколко предимства, които могат да подобрят разработването на сложни потребителски интерфейси. Те:
- Помогнете за отделяне на проблемите на потребителския интерфейс от основното дърво на компонентите, като подобрите поддръжката и четливостта на кода.
- Осигурете гъвкавост за компоненти, които трябва да се показват извън техния родителски компонент.
- Улеснете създаването на модали и наслагвания, които са отделни от останалата част от потребителския интерфейс.
- Позволяват ви лесно да контролирате z-индекса на компонентите, като гарантирате, че можете да наслоявате и подреждате елементите на потребителския интерфейс.
Потенциални клопки и съображения
Въпреки че порталите на React са полезни, имайте предвид следните неща:
- Проблеми с CSS: Порталите могат да причинят неочаквано поведение на CSS стил, тъй като поставят съдържание извън родителските компоненти. Използвайте глобални стилове или управлявайте CSS обхвата внимателно.
- Достъпност: Когато използвате портали за изобразяване на съдържание, не забравяйте да запазите непокътнати функции за достъпност като навигация с клавиатура и съвместимост с екранен четец.
- Изобразяване от страна на сървъра: Порталите може да не се свързват добре с изобразяване от страна на сървъра (SSR). Разберете ефектите и ограниченията от използването на портали в настройки на SSR.
Раздвижване на потребителския интерфейс отвъд нормата
React Portals предлагат силно решение за справяне със сложни UI ситуации, които изискват съдържание да се показва отвъд ограниченията на родителските компоненти.
Чрез хващане на портали и използване на най-добри практики можете да изградите потребителски интерфейси, които са по-адаптивни и по-лесни за поддръжка, като същевременно избягвате проблеми.
Независимо дали създавате модали или въвеждате библиотеки на трети страни, порталите на React предоставят мощен отговор за справяне с взискателните нужди на потребителския интерфейс.
