В рамках разработки современных веб-приложений часто возникает необходимость манипулировать DOM-структурой таким образом, чтобы элементы могли рендериться вне своего обычного контекста. Это может понадобиться, например, при реализации модальных окон, всплывающих подсказок или диалогов, которые должны отображаться поверх основного контента, но при этом не влиять на структуру DOM в родительском компоненте. Для решения этой задачи в Solid.js существует механизм, называемый порталами.
Портал в Solid.js — это способ рендеринга компонента в другом месте DOM-дерева, отличном от родительского компонента. Это полезно в тех случаях, когда необходимо разделить визуальное представление компонента и его логику, либо когда нужно вывести элемент в независимую область, например, в модальное окно или всплывающее меню. Важно, что порталы не создают новые контексты для реактивности. Это значит, что данные и события, связанные с родительским компонентом, могут продолжать корректно передаваться и обрабатываться.
Solid.js использует специальную функцию createPortal для
создания таких порталов. Эта функция позволяет компоненты
“телепортировать” в любое место DOM-дерева, обеспечивая чистоту и
независимость визуальных элементов, не нарушая структуру приложения.
Для использования портала необходимо импортировать функцию
createPortal из библиотеки Solid.js. Она принимает два
аргумента: сам компонент, который будет рендериться, и элемент DOM, в
который он должен быть помещен.
Пример:
import { createPortal } from "solid-js";
import { createSignal } from "solid-js";
function Modal() {
return (
<div class="modal">
<h2>Это модальное окно</h2>
<p>Контент модального окна</p>
</div>
);
}
function App() {
const [showModal, setShowModal] = createSignal(false);
return (
<div>
<button onCl ick={() => setShowModal(!showModal())}>Открыть модальное окно</button>
{showModal() && createPortal(<Modal />, document.body)}
</div>
);
}В этом примере, компонент Modal рендерится не внутри
родительского компонента App, а непосредственно в тег
body, что позволяет ему занимать независимое место в DOM и
при этом оставаться частью реактивной системы Solid.js.
При рендеринге компонента через портал его структура сохраняет все механизмы реактивности Solid.js. Это означает, что если компонент в портале использует сигналы или эффекты, они будут работать так же, как и в обычном компоненте.
Важно помнить, что телепортируемые компоненты не теряют своего контекста и остаются частью реактивной системы, даже если их визуально выводят в другом месте DOM. Например, если портал содержит в себе сигнал, изменения этого сигнала будут автоматически обновлять его состояние.
Пример с использованием сигнала:
function Modal() {
const [message, setMessage] = createSignal("Привет из модального окна!");
return (
<div class="modal">
<h2>{message()}</h2>
<button onCl ick={() => setMessage("Сообщение изменено!")}>Изменить сообщение</button>
</div>
);
}
function App() {
const [showModal, setShowModal] = createSignal(false);
return (
<div>
<button onCl ick={() => setShowModal(!showModal())}>Открыть модальное окно</button>
{showModal() && createPortal(<Modal />, document.body)}
</div>
);
}В данном примере кнопка в модальном окне изменяет состояние сигнала
message, что приводит к обновлению отображаемого текста в
реальном времени. Это подтверждает, что реактивность Solid.js
сохраняется и в компонентах, рендерящихся через портал.
Одной из важных особенностей порталов является то, что они могут быть полезны не только для структурных изменений, но и для контроля стилей. Иногда компоненты, такие как модальные окна, требуют применения стилей, которые могут быть ограничены внешним контекстом родительского компонента. Порталы позволяют рендерить элементы в изолированном месте, где можно применять отдельные стили, не влияя на остальной DOM.
Для модальных окон, например, можно использовать независимые стили, которые будут применяться только к элементам, рендерящимся через портал, а не ко всей странице.
Пример стилизации компонента через портал:
function Modal() {
return (
<div class="modal" style="background: rgba(0, 0, 0, 0.7); color: white; padding: 20px;">
<h2>Это модальное окно</h2>
<p>Контент модального окна</p>
</div>
);
}Здесь, модальное окно будет отображаться с отдельным фоном и цветом текста, что позволяет точно настроить его внешний вид независимо от стилей, применяющихся в основном приложении.
Так как портал рендерит компонент в другом месте DOM, иногда может возникнуть потребность в обработке событий, происходящих в этом элементе. В Solid.js события, такие как клики или наведение курсора, будут работать так же, как и в обычных компонентах. Это значит, что обработчики событий, привязанные к элементам внутри портала, будут вызываться и работать корректно.
Однако, важно помнить, что если портал используется для создания элементов, которые перекрывают другие элементы интерфейса, может потребоваться специальная логика для обработки взаимодействий с родительскими компонентами. Например, можно использовать обработчик клика, чтобы закрыть модальное окно, если пользователь кликнул за его пределами.
Пример закрытия модального окна по клику:
function Modal({ close }) {
return (
<div class="modal" onCl ick={close}>
<h2>Модальное окно</h2>
<p>Нажмите, чтобы закрыть</p>
</div>
);
}
function App() {
const [showModal, setShowModal] = createSignal(false);
const closeModal = () => setShowModal(false);
return (
<div>
<button onCl ick={() => setShowModal(true)}>Открыть модальное окно</button>
{showModal() && createPortal(<Modal close={closeModal} />, document.body)}
</div>
);
}Здесь, при клике на модальное окно, оно будет закрываться. Обработчик события работает независимо от того, что модальное окно отображается в портале.
Порталы являются мощным инструментом в Solid.js, позволяющим разрабатывать гибкие и изолированные компоненты с независимым рендерингом.