---
title: Порталы
seo:
  title: Порталы — React Developer
  description: Тема «Порталы» для собеседования React Developer. Что такое порталы (portals) в React?
---

[Все темы React Developer](/react-developer)

## <strong>Что такое порталы (</strong><code>portals</code><strong>) в React?</strong> [#q-14bee738d69b814ea88af38a59dd7891]

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

#### Основные характеристики&#58;

{/* prettier-ignore */}
1. <strong>Рендеринг вне DOM иерархии</strong>&#58;

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

1. <strong>Использование</strong> <code>ReactDOM&#46;createPortal</code>&#58;

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

    ```javascript
    import ReactDOM from 'react-dom';

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

#### Пример использования&#58;

```jsx
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-деревом и обеспечивая гибкость в управлении элементами.

:::note[Ссылки для изучения]

1. [Порталы в React](https://reactdev.ru/archive/react16/portals/)
   :::