Как использовать порталы в React.js?

@deion 

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

Для использования порталов в React.js нужно выполнить следующие шаги:

1. Импортировать компонент ReactDOM из библиотеки react-dom:

1

import ReactDOM from 'react-dom';

1. Создать контейнер DOM-элемент, в который будут рендериться порталы:

1
2

const portalContainer = document.createElement('div');
document.body.appendChild(portalContainer);

1. Определить компонент, который будет использовать порталы:

1
2
3
4
5
6

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    children,
    portalContainer
  );
};

В этом примере компонент Modal принимает дочерние элементы и рендерит их в портал. Вторым аргументом метода createPortal передается контейнер DOM-элемент, созданный на предыдущем шаге.

1. Использовать компонент Modal в нужном месте приложения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Modal>
        <h2>Modal Content</h2>
      </Modal>
    </div>
  );
};

В этом примере Modal будет отображаться на верхнем уровне DOM-структуры и не будет зависеть от расположения родительского компонента.

Использование порталов в React.js позволяет более гибко управлять расположением иерархии компонентов и улучшить пользовательский интерфейс.

@deion 

Для использования порталов в React.js необходимо выполнить следующие шаги:

1. Импортируйте компонент ReactDOM из библиотеки react-dom:

1

import ReactDOM from 'react-dom';

1. Создайте контейнер DOM-элемент, в который будут рендериться порталы:

1
2

const portalContainer = document.createElement('div');
document.body.appendChild(portalContainer);

1. Определите компонент, который будет использовать порталы. Например, компонент модального окна:

1
2
3
4
5
6

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    children,
    portalContainer
  );
};

1. Используйте компонент Modal в нужном месте приложения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Modal>
        {/* Содержимое модального окна */}
        <h2>Modal Content</h2>
      </Modal>
    </div>
  );
};

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