Что такое React equivelant of Angulars 'ng-container'

Question

Вместо элемента div я хочу использовать такой элемент, как 'ng-container' в Angular, чтобы избежать бесполезных элементов div в DOM.

Что такое React-эквивалент Angulars 'ng-container'?

Объяснение ng-container

Answer 1

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

function ChildA() {
  return (
    <h5>Child A</h5>
  );
}

function ChildB() {
  return (
    <h5>Child B</h5>
  );
}

function ChildC() {
  return (
    <h5>Child C</h5>
  );
}

Метод-1: Реагировать на фрагменты помогает добавить пустой контейнер для переноса списка дочерних элементов.метод внутреннего рендеринга.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Method-2 Обычный шаблон для компонента, который возвращает список дочерних элементов, заключая дочерние элементы в любой элемент контейнера , например, div, p

render() {
  return (
     <div>
      <ChildA />
      <ChildB />
      <ChildC />
    </div>
  );
}

Method-3 Существует новый, более короткий синтаксис, который можно использовать для объявления фрагментов. Вы можете использовать <> так же, как и любой другой элемент, кромечто он не поддерживает ключи или атрибуты.

render() {
  return (
     <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Method-4 В React 16.0 добавлена ​​поддержка возврата массива элементов из метода рендеринга компонента.Вместо того, чтобы помещать дочерние элементы в элемент DOM, вы можете поместить их в массив:

function App() {
  return (
    [
      <ChildA />,
      <ChildB />,
      <ChildC />
    ]

  );
}

Answer 2

Вы можете использовать React.Fragment

<React.Fragment>
    "Rest of elements here"
</React.Fragment>