react 遍历

最新推荐文章于 2024-04-24 15:27:53 发布

都雅宁

最新推荐文章于 2024-04-24 15:27:53 发布

阅读量444

点赞数

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_40599951/article/details/127790563

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

预备数据

  bannerJson = [{
    url: 'https://img14.360buyimg.com/babel/s590x470_jfs/t1/183788/24/29179/107408/636b6f4bE1eb6bfd4/28b051c7742688ce.jpg.avif'
  }, {
    url: 'https://img11.360buyimg.com/pop/s590x470_jfs/t1/186094/29/28365/83529/636381b5Ee0977f94/4799aa3aeb3d7225.jpg.avif'
  }, {
    url: 'https://imgcps.jd.com/ling4/100005483298/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/9b0fb4ba/cr/s/q.jpg'
  }]

  list = {
    name: '张三',
    sex: '男',
    address: '广东省深圳市南山区南山大道科技南路左边'
  }

遍历对象

Object.keys().map

render（）{
 const list= this.list
	 return (
      .....
          {Object.keys(list).map((item, index)=>
              <view key={index}>{item}: {list[item]}</View>
          )}
        .....
    )
		.....
}

遍历数组

for循环

render() {
  const bannerList = (list) => {
      const res = []
      for (let item = 0; item<list; item++) {
        // @ts-ignore
        res.push(<SwiperItem>
          <Image className='bannerImage' src={this.bannerJson[item].url}></Image>
        </SwiperItem>
        )
      }
      return res
    }
`return {
	....
		{bannerList (3)}
	......
	}
}

map：

render（）{
 const bannerJson = this.bannerJson
	return (
		.....
		{bannerJson.map((item) =>
		  <SwiperItem>
		      <Image className='bannerImage' src={item.url}></Image>
		    </SwiperItem>
		  )}
		)
		.....
}