React循環(huán)遍歷渲染數(shù)組和對象元素方式

更新時(shí)間：2022年09月07日 17:07:17 作者：「已注銷」

這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對象元素方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

循環(huán)遍歷渲染數(shù)組和對象元素

遍歷渲染數(shù)組

1.單純數(shù)組

const pureArr = ['a','b','c','d']
//假如我們想將上面的數(shù)組利用react渲染成一個(gè)列表，代碼如下：{
{pureArr.map(item => (
<li key={item}>item</li>
))}

以上代碼在codesandbox中運(yùn)行結(jié)果如下：

2. 對象數(shù)組

const objArr = [
  {
    value: "this",
    label: "this"
  },
  {
    value: "is",
    label: "is"
  },
  {
    value: "test",
    label: "test"
  }
];
//假如我們想將上面的數(shù)組利用react渲染成一個(gè)列表，代碼如下：{
{objArr.map((item, idx) => (
       <li key={idx} className={classes.li}>
          {item.label} : {item.value}
        </li>
	))
}

以上代碼在codesandbox中運(yùn)行結(jié)果如下：

遍歷渲染對象元素

此用法不常見但是個(gè)考點(diǎn)

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>
  );
}

以上代碼在codesandbox中運(yùn)行結(jié)果如下：

遍歷對象生成dom

項(xiàng)目場景

目前有一個(gè)需求，是要接收后臺(tái)返回的一個(gè)對象，并且遍歷他的屬性和值顯示到頁面上，因?yàn)樵搶ο蟊硎镜氖亲远x參數(shù)，每一次都不一樣，所以記錄一下；

問題描述

之前最常用的map是方法是用來遍歷數(shù)組的。

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

那對象的話，怎么遍歷呢？

API: Object.keys()
作用：遍歷對象中的屬性

所以我們可以通過Object.keys(obj)來獲取該對象的所有屬性，根據(jù)這個(gè)數(shù)組的map方法生成相應(yīng)的dom節(jié)點(diǎn)，代碼如下：

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

不要著急，繼續(xù)往下看，還可能遇到個(gè)小坑

補(bǔ)充

看下面的代碼，看看你能否發(fā)現(xiàn)問題

 // field為接口字段，屬性個(gè)數(shù)不確定。
 // 例如： field = { a: "123", model: "text", ... } 
 <Descriptions 
 	title="自定義參數(shù)" 
 	size="middle" 
 	labelStyle={{ color:"#999" }} 
 	style={{ overflowY: "auto", maxHight: "160px" }}
 >
	{/* <pre >{JSON.stringify(field,null,2)}</pre> */}
	{
	  Object.keys(field).map((name)=>{
	    return <Descriptions.Item label={name}>{field.name}</Descriptions.Item>
	  })
	}
	</Descriptions>

這段代碼在頁面展示的時(shí)候，只展示屬性，那么為什么不展示值呢，這個(gè)就得從對象的點(diǎn)和中括號的區(qū)別說起了。

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