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

Z时代
2024-01-10
分类：综合

react

遍历渲染数组

1.单纯数组

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

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

2. 对象数组

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

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

遍历渲染对象元素

此用法不常见但是个考点

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