React 学习-6-列表 & keys

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

html 复制代码
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.listData
  const 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.listData
 
  return (
   <ul>
    { listData.map((item,index)=> 
        //此时若想将index绑定到ul上,需要将ul抽取,新建函数用来存放li
        <LiList key={index} item={item} />
      )
    }
   </ul>
  )
}

function liList(props){
  return  <li>{props.item}</li>
}
相关推荐
yinke小琪8 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿12 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux13 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵15 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆17 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端20 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_21 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪23 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany24 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77727 分钟前
ES2025新特性详解
前端