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>
}
相关推荐
ᥬ 小月亮10 分钟前
webpack基础
前端·webpack
凛铄linshuo25 分钟前
爬虫简单实操2——以贴吧为例爬取“某吧”前10页的网页代码
爬虫·python·学习
YongGit29 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
大春儿的试验田1 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc