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中运行结果如下：