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

Question

我希望不使用div元素，而希望使用Angular中的'ng-container'这样的元素来避免DOM中无用的div元素。

什么是Angulars'ng-container'的React等效项？

ng容器的说明

Answer 1

您可以使用 React.Fragment

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

Answer 2

Fragments 使您可以对子项列表进行分组，而无需向 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() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

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

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

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

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

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

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

  );
}

Answer 3

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

<>
  Rest of markup here
</>