ReactJS - 片段_ReactJS 菜鸟教程

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

在组件文件夹（src/components/ListOfCustomer.js）下创建一个组件 ListOfCustomer

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 允许键通过其键属性传递。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

<< ReactJS - 转发引用 ReactJS - 高阶组件 >>