解决React遍历每次渲染多个根元素导致无法为元素赋值key的问题

遍历时，存在多个根标签，如果使用<>无法正确赋值key，代码如下：

function App() {
	const list = [
		{ id:1, name:"小明" },
		{ id:2, name:"小田" },
		{ id:3, name:"小王" }
	]
	const listContent = list.map(item => (
		<>
			<li>{item.name}</li>
			<li>-----------</li>
		</>
	))
	return (
		<ul>{listContent}</ul>
	)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用Fragment可以解决

import { Fragment } from "react"

function App() {
	const list = [
		{ id:1, name:"小明" },
		{ id:2, name:"小田" },
		{ id:3, name:"小王" }
	]
	const listContent = list.map(item => (
		<Fragment key={item.id}>
			<li>{item.name}</li>
			<li>-----------</li>
		</Fragment>
	))
  
	return (
		<ul>{listContent}</ul>
	)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19