... > React > Фрагменты и порталы...

Фрагменты и порталы в React

НАВИГАЦИЯ ПО СТРАНИЦЕ

Фрагменты Порталы

В React фрагменты и порталы предоставляют удобные средства для работы с DOM.

Фрагменты:

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

import React from 'react';

const MyComponent = () => {
  return (
    <React.Fragment>
      <div>Element 1</div>
      <div>Element 2</div>
    </React.Fragment>
  );
};

export default MyComponent;

Фрагменты могут также записываться с помощью сокращенного синтаксиса <> ... </>.

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <div>Element 1</div>
      <div>Element 2</div>
    </>
  );
};

export default MyComponent;

Порталы:

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

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

const MyPortal = () => {
  return ReactDOM.createPortal(
    <div>Content rendered outside the root</div>,
    document.getElementById('portal-root')
  );
};

export default MyPortal;

В этом примере элемент <div> будет отрендерен в DOM внутри элемента с идентификатором portal-root, который должен существовать на вашей странице.

Используйте фрагменты, чтобы группировать элементы без создания дополнительного уровня в DOM, и порталы, чтобы рендерить элементы вне иерархии компонентов. Это позволяет вам более гибко управлять структурой вашего приложения и разделением ответственности между компонентами.

Яндекс Практикум

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748