ReactJS - 片段 (Fragments)

Fragment 是一個簡單的解決方案，用於分組多個 React 元素，而無需在 DOM 中新增額外的標記。

在 React 中，元件的 render 方法允許返回一個 React 元素。對於元件要返回多個元素，這些元素需要包裝在一個通用的容器元素中。例如，要返回多個 p 元素，應該將其包裝在一個 div 元素中，如下所示：

<div>
   <p>One</p>
   <p>Two
   </p>
</div>

對於大多數場景，包裝一個通用的根元素是可以的，但某些場景需要特殊處理。它們如下：

某些元素，例如 li、td 等，不能被包裝在通用元素中。
當元件只需要返回部分元素列表時（最終將被包裝在父元件中）。

讓我們編寫一個簡單的元件來更好地理解我們的問題。該元件的功能是返回部分客戶列表，如下所示：

<li>John</li>
<li>Peter</li>

使用 create-react-app 建立一個新應用程式並啟動它。

create-react-app myapp
cd myapp
npm start

在 components 資料夾下建立一個元件 ListOfCustomer (src/components/ListOfCustomer.js)

import React from 'react'
class ListOfCustomer extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      console.log(this.props)
      var names = this.props['names'];
      var namesList = names.map(
         (name, index) => <li>{name}</li>
      )
      return <ul>{namesList}</ul>
   }
}
export default ListOfCustomer

在這裡，元件遍歷 names 屬性並將它渲染成一個 li 元素列表。

現在，在我們的根元件 (App.js) 中使用該元件。

import ListOfCustomer from './components/ListOfCustomer';
function App() {
   var names = ["John", "Peter"]
   return (
      <ul>
         <ListOfCustomer names={names} />
      </ul>
   );
}
export default App;

這將導致渲染多個 ul，如下所示：

<ul><ul><li>John</li><li>Peter</li></ul></ul>

讓我們更改元件以使用 React.Fragment。

import React, { Fragment } from 'react'
class ListOfCustomer extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      console.log(this.props)
      var names = this.props['names'];
      var namesList = names.map(
         (name, index) => <li>{name}</li>
      )
      return <React.Fragment>{namesList}</React.Fragment>
   }
}
export default ListOfCustomer

現在，我們的元件渲染有效的 HTML 文件。

<ul><li>John</li><li>Peter</li></ul>

帶鍵的片段 (Keyed Fragments)

在上面的示例中，React 在開發者控制檯中丟擲一個警告，如下所示：

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `ListOfCustomer`. See https://reactjs.org.tw/link/warning-keys for more information.
li
ListOfCustomer@https://:3000/main.4bbe8fa95c723e648ff5.hot-update.js:26:10
ul
App
render - ListOfCustomer.js:9

正如警告所說，React 期望列表中的每個元素都有唯一的鍵。它使用鍵來識別哪些元素已更改、已新增或已刪除。React.Fragment 允許透過其 key 屬性傳遞鍵。React 將在內部使用它來只渲染列表中已修改的項。讓我們更改我們的程式碼並向 React.Fragment 新增鍵，如下所示：

import React, { Fragment } from 'react'
class ListOfCustomer extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      console.log(this.props)
      var names = this.props['names'];
      var namesList = names.map(
         (name, index) => <li key={index}>{name}</li>
      )
      return <React.Fragment>{namesList}</React.Fragment>
   }
}
export default ListOfCustomer

這將消除錯誤。

簡寫語法

React.Fragment 有一種替代的簡寫語法，它既易於使用又易於閱讀。

<>
JSX element
</>

讓我們更改我們的程式碼以適應簡寫語法。更新後的程式碼如下所示：

import React, { Fragment } from 'react'
class ListOfCustomer extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      console.log(this.props)
      var names = this.props['names'];
      var namesList = names.map(
         (name, index) => <li key={index}>{name}</li>
      )
      return <>{namesList}</>
   }
}
export default ListOfCustomer

列印頁面