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