Question

我希望没有div元素，而是希望像Angular中的'ng-container'这样的元素避免DOM中无用的div元素。

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

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 />
    ]

  );
}

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

2 个答案: