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.ac.cn/link/warning-keys for more information.
li
ListOfCustomer@https://127.0.0.1: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

打印页面