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

Пользователь

от deion , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaylen.trantow , 10 месяцев назад

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