日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者:「已注銷」 ? 更新時間: 2022-11-02 編程語言

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

遍歷渲染數(shù)組

1.單純數(shù)組

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

以上代碼在codesandbox中運行結(jié)果如下:

2. 對象數(shù)組

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

以上代碼在codesandbox中運行結(jié)果如下:

遍歷渲染對象元素

此用法不常見但是個考點

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中運行結(jié)果如下:

遍歷對象生成dom

項目場景

目前有一個需求,是要接收后臺返回的一個對象,并且遍歷他的屬性和值顯示到頁面上,因為該對象表示的是自定義參數(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ù)這個數(shù)組的map方法生成相應(yīng)的dom節(jié)點,代碼如下:

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ù)往下看,還可能遇到個小坑

補(bǔ)充

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

 // field為接口字段,屬性個數(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>

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

下面選自《你不知道的JavaScript(上卷)》

簡單的說就是:

  • 中括號法可以用變量作為屬性名,而點方法不可以;
  • 中括號法可以用數(shù)字作為屬性名,而點語法不可以;
  • 中括號法可以使用js的關(guān)鍵字和保留字作為屬性名,而點語法不可以 (盡量避免在變量或者屬性中使用關(guān)鍵字或保留字);

原文鏈接:https://blog.csdn.net/Lockey23/article/details/89632834

欄目分類
最近更新