Angular 'ng-container' 的 React 等价物是啥

Posted 2023-03-05

【中文标题】Angular \'ng-container\' 的 React 等价物是啥

【英文标题】：What is the React equivelant of Angulars 'ng-container'Angular 'ng-container' 的 React 等价物是什么

【发布时间】：2019-03-29 20:06:49

【问题描述】：

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

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

Explanation of ng-container

【问题讨论】：

阅读：reactjs.org/docs/fragments.html

【参考方案1】：

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

<>
  Rest of markup here
</>

【参考方案2】：

片段让您可以对子列表进行分组，而无需向 DOM 添加额外的节点。

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


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


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

方法一： React Fragments 有助于在渲染方法中添加空容器来包装子列表。

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

方法二 一个常见的模式是组件通过使用任何容器元素 e.g div,p

包装子级来返回子级列表

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

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

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

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

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

  );

【参考方案3】：

您可以使用React.Fragment

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