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

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

js 复制代码
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可以解决

js 复制代码
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>
	)
}
相关推荐
Simon_He4 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊40 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子1 小时前
智能前端实践之 shot-word demo
前端
归于尽1 小时前
智能前端小魔术,让图片开口说单词
前端·react.js