Angulars 'ng-container' 的 React equivelant 是什么

Question

我想要一个像 Angular 中的“ng-container”这样的元素，而不是一个 div 元素，以避免在 DOM 中出现无用的 div 元素。

Angulars 'ng-container' 的 React 等价物是什么？

ng-container 的解释

Answer 1

您可以使用React.Fragment

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

Answer 2

片段允许您将子列表分组，而无需向DOM添加额外节点。

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

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

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

方法-1： React Fragments有助于添加空容器以包装render方法中的子列表。

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

方法-2一个常见的模式是组件通过使用任何容器元素（ 例如div，p）包装子项来返回子项列表

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

方法-3您可以使用一种新的，更短的语法来声明片段。您可以使用<>，就像使用任何其他元素一样，除了它不支持键或属性。

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

方法-4 React 16.0增加了对从组件的render方法返回元素数组的支持。 您可以将它们放入数组中，而不是将子项包装在DOM元素中：

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

  );
}

Answer 3

我们也可以使用空的<>标签

<>
  Rest of markup here
</>