Как использовать порталы в 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 позволяет более гибко управлять расположением иерархии компонентов и улучшить пользовательский интерфейс.