Frontender Libs - обзор библиотек JS / CSS

Использование createPortal для рендеринга компонентов вне DOM-иерархии в React

Метод createPortal в React позволяет рендерить компоненты вне текущей DOM-структуры. Это полезно для создания модальных окон, всплывающих меню или уведомлений, которые должны отображаться поверх остальных элементов без влияния родительских стилей и позиционирования.

Создание уведомления, рендерящегося в отдельном узле DOM:

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

function Notification({ message }) {
  return ReactDOM.createPortal(
    <div className="notification">
      {message}
    </div>,
    document.getElementById('notification-root')
  );
}

В этом примере компонент Notification рендерится в элемент с ID notification-root, который находится вне основного DOM-дерева приложения. Это позволяет отображать уведомление поверх других компонентов без конфликтов стилей и вложенности.

👉 @sWebDev

👍4

www.tgoop.com/sWebDev/3199

1.38K viewsOct 14, 2024 at 08:11

Использование createPortal для рендеринга компонентов вне DOM-иерархии в React

Метод createPortal в React позволяет рендерить компоненты вне текущей DOM-структуры. Это полезно для создания модальных окон, всплывающих меню или уведомлений, которые должны отображаться поверх остальных элементов без влияния родительских стилей и позиционирования.

Создание уведомления, рендерящегося в отдельном узле DOM:

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

function Notification({ message }) {
  return ReactDOM.createPortal(
    <div className="notification">
      {message}
    </div>,
    document.getElementById('notification-root')
  );
}

BY Frontender Libs - обзор библиотек JS / CSS