react中v-for列表循环

前言：在vue中如果想要将数组中的数据进行循环的时候可以直接使用封装好的v-for指令进行实现，但是在react中是没有这种指令的，那么在react中是怎样实现列表的循环呢，下面一起看下react中是怎样实现的。

1、数组中的数据渲染

在平时开发中我们经常会遇到数组包含一系列数据的情况，然后在页面上展示出符合条件的数据，在react的jsx语法中我们可以直接将数组循环并将需要渲染的元素返回即可，如：

import React from 'react'
const listData = [
  {
    id: 1,
    text: '我是第一条数据'
  },
  {
    id: 2,
    text: '我是第二条数据'
  },
  {
    id: 3,
    text: '我是第三条数据'
  }
]
export default function ForRender() {
  return (
    <div>
      <ul>
        {
          listData.map(item => {
            if (item.id === 2) return 
            return <li key={item.id}>{item.text}</li>
          })
        }
      </ul>
    </div>
  )
}

在上述代码中，在jsx语法中使用了数组中的map方法对listData进行循环映射，每一项返回使用合适的元素标签进行包裹的内容，在循环的过程中过滤掉不符合条件的id为2的那条数据来进行展示。（注意循环的时候为了diff算法的对比记得给元素添加key属性）。效果如下：

2、对象中的数据渲染

上面我们演示了数据中的数据循环渲染，但是有的时候还有一些是对象的数据也要渲染，那么我们直接使用将对象转换为数组的方法然后在进行循环即可，如：

import React from 'react'
const objData = {
  1: '我是第一条数据',
  2: '我是第二条数据',
  3: '我是第三条数据',
}
export default function ForRender() {
  return (
    <div>
      <ul>
        {
          Object.entries(objData).map(([id, text]) => {
            return <li key={id}>{id + '、' + text}</li>
          })
        }
      </ul>
    </div>
  )
}

上述代码使用了entries方法将对象转换为了数组，然后在使用map方法根据数组展示的方法那样循环展示出来即可。效果如下：

3人点赞

技术生涯