解决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>
)
}
使用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>
)
}