React 学习-6-列表 & keys

React 学习-6-列表 & keys

码农世界 2024-05-15 前端 69 次浏览 0个评论

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

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

    转载请注明来自码农世界,本文标题:《React 学习-6-列表 & keys》

    百度分享代码,如果开启HTTPS请参考李洋个人博客
    每一天,每一秒,你所做的决定都会改变你的人生!

    发表评论

    快捷回复:

    评论列表 (暂无评论,69人围观)参与讨论

    还没有评论,来说两句吧...

    Top