Порталы

Все темы React Developer

Что такое порталы (portals) в React?

Порталы ( Portals ) — это метод, позволяющий рендерить дочерние элементы в DOM-узел, который находится вне иерархии DOM родительского компонента.

Основные характеристики:

1. Рендеринг вне DOM иерархии:

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

2. Использование ReactDOM.createPortal:

   • Принимает два аргумента: дочерний элемент и DOM-узел, в который нужно рендерить.

   import ReactDOM from 'react-dom';
   
   const MyPortal = ({ children }) => {
     return ReactDOM.createPortal(
       children,
       document.getElementById('portal-root') // DOM-узел для рендеринга
     );
   };

Пример использования:

import React from "react";
import ReactDOM from "react-dom";

const Modal = ({ isOpen, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById("modal-root"), // Узел в DOM
  );
};

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen}>
        <h2>Modal Content</h2>
        <button onClick={() => setIsOpen(false)}>Close Modal</button>
      </Modal>
    </div>
  );
};

export default App;

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