2022-03-04 学习记录--React-React脚手架实现遍历，要加key

小呀小萝卜儿

已于 2022-03-04 23:35:32 修改

阅读量397

点赞数 3

分类专栏：学习-React 文章标签：前端 react.js

于 2022-03-04 23:34:49 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/123287447

版权

学习-React 专栏收录该内容

37 篇文章 6 订阅

订阅专栏

这篇博客介绍了在React应用中，如何使用.map()方法遍历数组并为每个元素设置关键的key属性。通过示例代码展示了如何在卡片组件中展示GitHub用户信息，强调了为避免虚拟DOM diff过程中性能问题，为列表项添加唯一key的必要性。

摘要由CSDN通过智能技术生成

React脚手架实现遍历，要加`key`

在这里插入图片描述

对应代码：

{
	this.props.users.map((userObj) => {
		return (
			<div key={userObj.id} className="card">
				<a rel='noreferrer' href={userObj.html_url} target='_blank'>
					<img src={userObj.avatar_url} style={{width:'100px'}} alt="head_portrait"/>
				</a>
				<p className='card-text'>{userObj.login}</p>
			</div>
		)
	)
}