Реацт компоненте подстичу добре праксе, али оне могу бити превише рестриктивне. Научите како да разбијете калуп.
Кључне Такеаваис
- Реацт портали вам омогућавају да прикажете садржај компоненте ван хијерархије надређених компоненти, што га чини корисним за елементе корисничког интерфејса као што су модали и преклапања.
- Портали се могу користити у различитим сценаријима као што су модали, интеграције независних произвођача, контекстни менији и описи алата, омогућавајући флексибилно приказивање на различитим ДОМ локацијама.
- Коришћењем Реацт портала, можете одвојити проблеме корисничког интерфејса од главног стабла компоненти, побољшати одржавање кода и лако контролисати з-индекс компоненти за слојеве и слагање елемената корисничког интерфејса.
Модерним веб апликацијама су потребни интерфејси који садрже елементе као што су модали и описи алата. Али ове компоненте корисничког интерфејса можда се неће увек добро интегрисати са постојећом структуром компоненти.
Реацт нуди решење за овај проблем кроз функцију под називом Портали.
Шта су Реацт портали?
Реацт портали пружају начин да се садржај компоненте прикаже изван хијерархије надређене компоненте. Другим речима, они вам омогућавају да прикажете излаз компоненте у другом ДОМ елементу који није потомак тренутне компоненте.
Ова функција је згодна када се ради са компонентама корисничког интерфејса које треба да се рендерују на вишем нивоу у ДОМ-у, као што су модали или преклапања.
Користи се за Реацт портале
Реацт портали су корисни у различитим сценаријима:
- Модали и преклопи. Када треба да прикажете модалне дијалоге или преклапања, рендерујте их на највишем нивоу ДОМ-а. Ово осигурава да их стилови или распоред њихових родитеља не ограничавају.
- Интеграције треће стране. Када интегришете библиотеке независних произвођача које предвиђају приказивање на одређеним ДОМ локацијама.
- Контекстуални менији. Креирање контекстних менија који реагују на интеракције корисника, које треба да поставите у односу на оквир за приказ или одређени ДОМ елемент.
- Објашњења и искачући огласи. Приликом приказивања описа алатки или искачућих приказа који се морају појавити на врху других компоненти, без обзира на њихову позицију у стаблу компоненти.
Како функционишу Реацт портали
Традиционално, када рендерујете компоненту у Реацт-у, њен излаз прилажете ДОМ чвору родитељске компоненте. Ово добро функционише за већину сценарија, али постаје ограничавајуће када треба да прикажете садржај изван хијерархије родитеља.
Претпоставимо да креирате модални дијалог. Подразумевано ћете поставити садржај модала унутар ДОМ чвор родитељске компоненте.
Ово може довести до сукоба стилова и другог ненамерног понашања пошто садржај модала наслеђује стилове и ограничења његових надређених компоненти.
Реацт портали решавају ово ограничење тако што вам дозвољавају да одредите циљни ДОМ елемент где треба да се прикаже излаз компоненте.
То значи да можете да прикажете било који УИ елемент изван родитељске ДОМ хијерархије, ослобађајући се ограничења стилова и распореда родитеља.
Како користити Реацт портале
Модали су савршен пример када можете да користите Реацт портале. Овај пример кода објашњава процедуру.
Подесите основну Реацт апликацију
Пре креирања портала, уверите се да имате подешену основну Реацт апликацију. Можете користити алати као што је Цреате Реацт Апп да брзо скеле пројекта.
Направите портал за модале
Да бисте креирали портал, користите РеацтДОМ.цреатеПортал() функција. Потребна су два аргумента: садржај који желите да прикажете и референца на ДОМ чвор да бисте га приказали.
У овом примеру, Модална компонента приказује своју децу користећи портал. Садржај ће се појавити у ДОМ елементу са ИД-ом „роот“.
// Modal.js
import ReactDOM from"react-dom";const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;
Можете дефинисати садржај одређеног Модала у одређеној компоненти. На пример, ова компонента МодалЦонтент садржи пасус и а Близу дугме:
// Create a Modal Content Component
const ModalContent = ({ onClose }) => ("modal">"modal-content">This is a modal content.</p>
exportdefault ModalContent;
Затим можете да отворите Модал кликом на дугме дефинисано у Апп.јс:
// 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;
У овом примеру, Модална компонента приказује свој садржај користећи портал, одвојен од хијерархије главне компоненте.
Примери из стварног света
Реацт портали су корисни у разним свакодневним ситуацијама.
- Систем обавештавања: Када креирање система обавештавања, често желите да се поруке налазе на врху екрана, без обзира где се налази тренутна компонента.
- Контекстни мени: Контекстуални менији би требало да се појављују близу места где корисник кликне, без обзира на то где се то налази у ДОМ хијерархији.
- Интеграција треће стране: библиотеке трећих страна често морају да циљају произвољне делове ДОМ-а.
Најбоље праксе за коришћење портала
Да бисте на најбољи начин искористили Реацт портале, пратите ове савете:
- Изаберите праве случајеве: Портали су флексибилни, али нису свима потребни. Користите портале када редовно рендеровање изазива проблеме или сукобе.
- Одвојите садржај портала: Када приказујете садржај преко портала, уверите се да је самосталан. Не би требало да се ослања на родитељске стилове или контекст.
- Управљајте догађајима и радњама: Са порталима догађаји функционишу мало другачије због одвојеног садржаја. Правилно рукујте ширењем догађаја и акцијама.
Предности Реацт портала
Реацт портали нуде неколико предности које могу побољшати развој сложених корисничких интерфејса. они:
- Помозите да се проблеми корисничког интерфејса одвоје од стабла главне компоненте, побољшавајући одржавање и читљивост кода.
- Обезбедите флексибилност за компоненте које треба да се прикажу изван своје родитељске компоненте.
- Олакшајте креирање модала и преклапања који су одвојени од остатка корисничког интерфејса.
- Омогућава вам да лако контролишете з-индекс компоненти, обезбеђујући да можете уредно слојевати и слагати своје елементе корисничког интерфејса.
Потенцијалне замке и разматрања
Иако су Реацт портали корисни, имајте на уму следеће:
- Проблеми са ЦСС-ом: Портали могу да изазову неочекивано понашање ЦСС стила јер стављају садржај ван надређених компоненти. Користите глобалне стилове или пажљиво управљајте ЦСС опсегом.
- Приступачност: Када користите портале за приказивање садржаја, не заборавите да функције приступачности као што су навигација тастатуром и компатибилност са читачем екрана очувате нетакнутим.
- Рендеровање на страни сервера: Портали се можда неће добро уклапати приказивање на страни сервера (ССР). Схватите ефекте и ограничења коришћења портала у ССР подешавањима.
Покретање корисничког интерфејса изван норме
Реацт портали нуде снажно решење за руковање сложеним ситуацијама корисничког интерфејса којима је потребан садржај да би се појавио изван граница родитељских компоненти.
Схватањем портала и коришћењем најбољих пракси можете да направите корисничке интерфејсе који су прилагодљивији и лакши за одржавање, а да притом избегавате проблеме.
Без обзира да ли правите модале или доносите библиотеке трећих страна, Реацт портали пружају моћан одговор за решавање захтевних потреба корисничког интерфејса.