Question

选项1

import React from "react";

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        Component 
      </React.Fragment>
    );
  }
}

选项2

import React, { Fragment } from "react";

class App extends React.Component{
  render() {
    return (
      <Fragment>
        Component 
      </Fragment>
    );
  }
}

使用片段可以对子列表进行分组，而无需在DOM中添加额外的节点。但是有两种方法可以编写代码。哪个选项更好？

Answer 1

第二种方法更好，因为它可以缩短代码。如果需要多次使用React.Fragment会发生什么情况。

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <React.Fragment>
          <React.Fragment>Component</React.Fragment>
        </React.Fragment>
        <React.Fragment>
          <React.Fragment>Component</React.Fragment>
        </React.Fragment>
      </React.Fragment>
    );
  }
}




class App extends React.Component {
  render() {
    return (
      <Fragment>
        <Fragment>
          <Fragment>Component</Fragment>
        </Fragment>
        <Fragment>
          <Fragment>Component</Fragment>
        </Fragment>
      </Fragment>
    );
  }
}

肉眼显然第二种选择更好。

还有第三种选择。

class App extends React.Component {
  render() {
    return (
      <>
        <>
          <>Component</>
        </>
        <>
          <>Component</>
        </>
      </>
    );
  }
}

Answer 2

首先，这两种方法是相同的，因此这纯粹是个人观点。我喜欢最短的版本，因为它看起来更干净，但是由于您很可能只会给孩子包一次。渲染，使用React.Fragment可能会更容易，因此您不必考虑导入。但是正如我所说，它们是相同的，这取决于个人喜好。

Answer 3

我认为这是风格问题。

我更喜欢使用新的<></>语法

您甚至不必键入“ fragment”一词，这不是真正的进展吗？

新语法如下。

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <>
        Component 
      </>
    );
  }
}

您可以在此处阅读有关内容 https://reactjs.org/docs/fragments.html

Answer 4

选项3：有了新语法，现在使用片段变得更加容易。如果您只想将一堆子元素包装到1个片段中，并且不希望在该片段中添加任何类。只需使用以下语法：

return (
  <>
    <Component 1 />
    <Component 2 />
  </>
)

Answer 5

<></>语法不支持键或属性。迭代元素时，它将引发警告消息“列表中的每个孩子都应该有一个唯一的“键”道具”。

例如：

{props.items.map(item => (
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
))}

参考文档https://reactjs.org/docs/fragments.html#keyed-fragments

如何最好地使用React.Fragment

5 个答案: