React 学习-6-列表 keys

1.生成列表的方式:使用map()循环数组,放入ul,li中,并将数组的index作为唯一key。key通常保存在ul上,而非单个元素li中.按照此思路手写代码如下:

1.创建div
<div id="test"></div>2创建数组并为div绑定元素
const data= [1, 2, 3, 4, 5];ReactDOM.render(//引入要加载的元素并传入数组,自定义一个<ListArrayTestlistData={data}/>,
document.getElementById("test")
)3.创建render函数中自定义的组件
写法一:
function ListArrayTest(props){const listData= props.listDataconst LiLists = listData.map((item,index)=> //此时若想将index绑定到ul上,需要将ul抽取,新建函数用来存放li<liList key={index} item={item} />)return (<ul>{liLists }</ul>)
}function LiList(props){return  <li>{props.item}</li>
}写法二:
function ListArrayTest(props){const listData= props.listDatareturn (<ul>{ listData.map((item,index)=> //此时若想将index绑定到ul上,需要将ul抽取,新建函数用来存放li<LiList key={index} item={item} />)}</ul>)
}function liList(props){return  <li>{props.item}</li>
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/11942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

牛顿/高斯牛顿/LM法与最小二乘

最小二乘分为线性最小二乘和非线性最小二乘 最小二乘目标函数都是min||f(x)||2 若f(x) ax b&#xff0c;就是线性最小二乘&#xff1b;若f(x) ax2 b / ax2 bx 之类的&#xff0c;就是非线性最小二乘&#xff1b; 求解线性最小二乘&#xff0c;【参考】 求解非线性最小二…

【多人协作】场景模拟(一)

文章目录 实现多人协作场景&#xff1a;操作流程1开发人员a和b克隆仓库到本地2在本地仓库建立分支并与远程分支建立链接3开发人员工作并提交代码4将合并dev分支与master分支 实现多人协作 多人协作开发是git的最核心也是最重要的操作。多人协作也就意味着同一时间里&#xff0…

关系数据库的规范化,关系模式,充分理解三级范式

第一范式 当一个集合R中&#xff0c;每一个元素都不可再分的时候&#xff0c;便符合第一范式。 例&#xff1a;{学号&#xff0c;姓名&#xff0c;专业编号&#xff0c;专业名称&#xff0c;课程号&#xff0c;课程名&#xff0c;成绩} 第二范式 当一个集合R&#xff0c;符合…

游戏私域运营干货必看 | 《 2023 中国移动游戏私域运营指南》下载

在新游竞争越发激烈、买量效率持续走低、用户注意力资源紧缺等悬而未决的现实困境下&#xff0c;游戏企业必须在存量市场中&#xff0c;寻找一条可行、可复制的出路。 为了一探究竟&#xff0c;网易云商分别面向国内 23 家中大型研运一体化游戏公司&#xff0c;与 2000 位真实…

红黑树!!

文章目录 1.红黑树的概念2.红黑树的几种情况2.1 情况一&#xff1a;cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红(p为parent&#xff0c;g为grandfather&#xff0c;u为uncle)2.2 情况二&#xff1a;cur为红&#xff0c;p为红&#xff0c;g为黑&#xff…

PIC单片机提示 No valid installed HI-TECH compiler drivers

PIC单片机提示 No valid installed HI-TECH compiler drivers-CSDN博客

MATLAB支持向量机:函数或变量 ‘svmtrain‘ 无法识别解决方法

我的MATLAB版本是2020a&#xff0c;在运行程序时出现了一下报错 若在运行程序时出现了以下报错&#xff1a; 支持向量机程序在MATLAB执行代码的时候发现有错误。 试一下help&#xff0c;如下图所示&#xff0c;SVM_L和svmtrain均找不到。 打开matlab帮助文档&#xff1a; 可…

C# XPTable in .net6(XPTable控件使用说明八)

经过作者schoetbi、armin-pfaeffle的努力&#xff0c;XPTable已经可以在 winform .net6 .net8的环境下使用&#xff0c;版本升级到了2.0&#xff0c;这样就可以在winform下同时使用XPTABLE和EFcore, 这样就可以解决大部分的场景了。

【HMGD】GD32/STM32 DMA接收不定长串口数据

单片机型号&#xff1a;GD32F303系列 CubeMX配置 配置串口参数 开启DMA 开启中断 示例代码 使用到的变量 uint8_t RX_Buff_FLAG 0; uint8_t RX_Buff[300] {0}; uint8_t TX_Buff[300] {0};串口接收空闲函数 // 串口接收空闲函数 void HAL_UARTEx_RxEventCallback(UART_H…

邮件地址采集软件有哪些-邮箱地址采集软件

邮件地址采集软件是帮助用户收集、管理和使用邮件地址的工具&#xff0c;它们在商业营销、市场调研、网络爬虫等领域有着广泛的应用。以下是一些常见的邮件地址采集软件&#xff1a; 易邮件地址搜索大师&#xff1a;易邮件地址搜索大师是一款搜索邮件地址和手机号码的软件&…

Java_从入门到JavaEE_14

Day14 一.正则表达式 – 了解 含义&#xff1a;用来描述或者匹配一系列符合某个语句规则的字符串 案例&#xff1a;把一个字符串中带电话号码替换成111****1234 public static void main(String[] args) {String str "张三11112341234";String regex "(1\\d…

数据库开发记录

一.MySQL相关 1.Spatial Data相关

学习前端第三十三天(函数对象,NFE,定时器)

一、函数对象 函数的类型是对象。 1.属性“name” 函数都有个“name”&#xff0c;即使函数被创建时没有名字&#xff0c;名称赋值的逻辑也能给它赋予一个正确的名字&#xff0c;然后进行赋值。 const fn function () { };function fnn() {}const user {sayBye: function …

OpenAI发布最强大模型GPT-4o:对所有用户免费

OpenAI 最新推出的 GPT-4o 模型在实现更自然的人机交互方面迈出了重要一步。GPT-4o的“o” 源自拉丁语“全方位”&#xff0c;意思是“一切”。活动期间 OpenAI, 米拉穆拉蒂该公司技术总监上台展示了新的语言模型。她强调&#xff0c;拥有 OpenAI 帐户的每个人都可以免费使用新…

蓝桥杯备战21.哥德巴赫猜想

P1304 哥德巴赫猜想 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; struct student {string name;int c,m,e,s; }; bool check(int n) {for(int i2;i*i<n;i){if(n%i0)return 0;}return 1; } void out(int n) {for(int …

安装adobe系列,提示错误代码146解决办法

安装Adobe系列产品如PS、PR、Lrc等产品时&#xff0c;会因为各种各样的错误导致安装失败&#xff01;今天小编为大家带来的是安装adobe系列&#xff0c;提示错误代码146解决办法&#xff0c;收藏起来吧&#xff01; 方法一&#xff1a;就是传说中的万能大法&#xff0c;关机重启…

【MySQL】sql表设计的注意事项

程序员的实用神器 文章目录 程序员的实用神器强烈推荐引言注意事项强烈推荐专栏集锦写在最后 强烈推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站:人工智能 推荐一个个人工作&#x…

五、Linux二进制安装MariaDB 六、MariaDB主从复制

目录 五、Linux二进制安装MariaDB1 卸载mariadb1.1 卸载相关的服务(mysql和mariadb都查询一下)1.2 查找MySQL和mariadb相关的文件目录 2 安装mariadb2.1 mariadb下载地址2.2 将安装包放入到服务器中并解压 (我放到opt下)2.3 将解压后的目录移动到安装目录下2.4 创建数据目录(根…

高效且安全的传输工具:FileLink跨网文件传输

在数字化时代&#xff0c;文件传输已成为我们日常工作和生活不可或缺的一部分。无论是企业内部的资料共享&#xff0c;还是企业对外的文件交换&#xff0c;都需要一个高效、稳定且安全的传输工具。而FileLink跨网文件传输正是满足这些需求的理想选择。 FileLink跨网文件传输 首…

MYSQL5.7.39 升级到 MYSQL8.0.33

1 下载 mysql-shell-8.0.37-linux-glibc2.12-x86-64bit.tar.gz https://dev.mysql.com/downloads/shell/ 2 安装mysql-shell #上传mysql-shell安装包,并安装 #tar -xvf mysql-shell-8.0.37-linux-glibc2.12-x86-64bit.tar.gz #cd /data/app #mv mysql-shell-8.0.37-linux…