您现在的位置是：网站首页> 编程资料编程资料

React循环遍历渲染数组和对象元素方式_React_

2023-05-24 417人已围观

简介 React循环遍历渲染数组和对象元素方式_React_

循环遍历渲染数组和对象元素

遍历渲染数组

1.单纯数组

const pureArr = ['a','b','c','d'] //假如我们想将上面的数组利用react渲染成一个列表，代码如下：{ {pureArr.map(item => ( item
 ))}

以上代码在codesandbox中运行结果如下：

2. 对象数组

const objArr = [ { value: "this", label: "this" }, { value: "is", label: "is" }, { value: "test", label: "test" } ]; //假如我们想将上面的数组利用react渲染成一个列表，代码如下：{ {objArr.map((item, idx) => (  {item.label} : {item.value} 
 )) }

以上代码在codesandbox中运行结果如下：

遍历渲染对象元素

此用法不常见但是个考点

const statusObj = { developing: 'Developing', implemented: 'Implemented', auditClean: 'Audit Clean', deprecation: 'Deprecated', unknown: 'Unknown', } function SimpleList(props) { const { classes } = props; return (  {Object.keys(statusObj).map((obj, idx) => ( {obj} : {statusObj[obj]}
 ))} 
 ); }

以上代码在codesandbox中运行结果如下：

遍历对象生成dom

项目场景

目前有一个需求，是要接收后台返回的一个对象，并且遍历他的属性和值显示到页面上，因为该对象表示的是自定义参数，每一次都不一样，所以记录一下；

问题描述

之前最常用的map是方法是用来遍历数组的。

const arr = [a, b, c] render(){ return (  { arr.map((item,index)=>{ return ( {item}
 ) }) } 
 ) }

那对象的话，怎么遍历呢？

API: Object.keys()
作用：遍历对象中的属性

所以我们可以通过Object.keys(obj)来获取该对象的所有属性，根据这个数组的map方法生成相应的dom节点，代码如下：

const obj = { a: [1,2,3], b: [4,5,6] } Object.keys(obj).map((element,index)=>{ return ( {element}
 element.map((item,i)=>{ return ( {item}
 ) }) 
 ) })

不要着急，继续往下看，还可能遇到个小坑

补充

看下面的代码，看看你能否发现问题

 // field为接口字段，属性个数不确定。 // 例如： field = { a: "123", model: "text", ... }  {/* {JSON.stringify(field,null,2)}
 */} { Object.keys(field).map((name)=>{ return {field.name} }) }

这段代码在页面展示的时候，只展示属性，那么为什么不展示值呢，这个就得从对象的点和中括号的区别说起了。

下面选自《你不知道的JavaScript（上卷）》