如何最好地使用 React.Fragment

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>
    );
  }
}

Fragments 讓你可以在不向 DOM 添加額外節點的情況下對子列表進行分組。但是編寫代碼有兩種選擇。 哪個選項更好？

Answer 1

<></>語法不支持鍵或屬性。 當元素被迭代時，它會拋出警告消息“列表中的每個子元素都應該有一個唯一的“鍵”屬性”。

例如 ：

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

參考文檔https://reactjs.org/docs/fragments.html#keyed-fragments

Answer 2

第二種選擇更好，因為它縮短了代碼。 如果你需要多次使用 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 3

首先，這兩種方法是相同的，所以純屬個人意見。 我喜歡最短的版本，因為它看起來更干凈，但因為你很可能只會包一次孩子。 渲染，使用 React.Fragment 可能更容易，所以你不必考慮導入。 但正如我所說，它們是相同的，這是個人品味的問題。

Answer 4

我認為這是一個風格問題。

我更喜歡使用新的<></>語法

你甚至不需要輸入“fragment”這個詞，這不正是進步的意義所在嗎？

新語法如下所示。

import React, { Component } from "react";

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

你可以在這里閱讀它https://reactjs.org/docs/fragments.html

Answer 5

選項 3：使用新語法，現在可以更輕松地使用片段。 如果您只想將一堆子元素包裝到 1 個片段中並且不希望向片段添加任何類。 只需使用以下語法：

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