ReactJS - Fragments(片段)

Fragment 是一种简单的解决方案，无需在 DOM 中添加额外的标记即可对多个 React 元素进行分组。

在 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>

带键的片段

在上面的示例中，React 在开发者控制台中抛出警告，如下所示 −

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `ListOfCustomer`. See https://reactjs.org/link/warning-keys for more information.
li
ListOfCustomer@http://localhost: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