Раскрытие возможностей порталов React: простое руководство с забавным примером

Порталы React — это мощная функция React, позволяющая отображать дерево компонентов за пределами родительской иерархии. Это означает, что вы можете визуализировать компонент в определенной точке иерархии DOM, независимо от того, где он находится в дереве компонентов. Это может быть полезно для создания модальных окон, всплывающих подсказок и других элементов пользовательского интерфейса, которые необходимо позиционировать относительно определенного элемента на странице.

Давайте рассмотрим пример, чтобы лучше понять, как работают порталы React. Представьте, что у нас есть простой компонент, который отображает модальное окно:

import React from 'react';

const Modal = ({ children }) => {
  return (
    <div className="modal">
      {children}
    </div>
  );
};

export default Modal;

Мы можем использовать этот компонент в другом компоненте следующим образом:

import React from 'react';
import Modal from './Modal';

const App = () => {
  return (
    <div>
      <h1>Welcome to my App</h1>
      <Modal>
        <h2>My Modal</h2>
        <p>This is my modal content</p>
      </Modal>
    </div>
  );
};

export default App;

Это отлично работает, но модальное окно отображается как дочерний элемент компонента App. Если бы мы хотели расположить модальное окно относительно другого элемента на странице, нам пришлось бы добавить много дополнительной логики для вычисления позиции.

Вот тут-то и появляются порталы React. Мы можем использовать функцию createPortal для рендеринга модального окна вне иерархии родительских компонентов:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from './Modal';

const App = () => {
  const modalRoot = document.getElementById('modal-root');

  return (
    <div>
      <h1>Welcome to my App</h1>
      {ReactDOM.createPortal(
        <Modal>
          <h2>My Modal</h2>
          <p>This is my modal content</p>
        </Modal>,
        modalRoot
      )}
    </div>
  );
};

export default App;

В этом примере мы создаем новый элемент DOM с идентификатором modal-root и визуализируем модальное окно в этот элемент, используя createPortal. Теперь модальное окно отображается за пределами компонента App, и мы можем расположить его относительно других элементов на странице без добавления дополнительной логики.

Порталы React — это мощная функция, которая может упростить процесс создания элементов пользовательского интерфейса, которые необходимо позиционировать относительно других элементов на странице. Немного попрактиковавшись, вы сможете легко начать использовать порталы React для создания сложных элементов пользовательского интерфейса.

вот базовый CSS для стилизации модального окна и размещения его в центре экрана:

/* App.css */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal h2 {
  margin-top: 0;
}

Вы можете добавить это в свой файл App.css или создать отдельный файл CSS для модального компонента. Обратите внимание, что это всего лишь базовый пример, и вам может потребоваться настроить стили в соответствии с вашим конкретным вариантом использования.

Пожалуйста, добавьте эту строку в index.html` под корневым элементом:

    <div id="modal-root"></div>

В заключение, порталы React — это мощная функция, позволяющая отображать компонент вне родительской иерархии. Это может быть полезно для создания пользовательских элементов пользовательского интерфейса, таких как модальные окна, всплывающие подсказки и многое другое. Используя функцию createPortal, вы можете визуализировать компонент в определенной точке иерархии DOM, независимо от того, где он находится в дереве компонентов. В этом посте мы продемонстрировали забавный и простой пример того, как использовать React Portals для создания модального окна. Немного попрактиковавшись, вы сможете с легкостью использовать React Portals для создания сложных элементов пользовательского интерфейса.