React循環(huán)遍歷渲染數(shù)組和對(duì)象元素方式
循環(huán)遍歷渲染數(shù)組和對(duì)象元素
遍歷渲染數(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. 對(duì)象數(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é)果如下:
遍歷渲染對(duì)象元素
此用法不常見(jiàn)但是個(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é)果如下:
遍歷對(duì)象生成dom
項(xiàng)目場(chǎng)景
目前有一個(gè)需求,是要接收后臺(tái)返回的一個(gè)對(duì)象,并且遍歷他的屬性和值顯示到頁(yè)面上,因?yàn)樵搶?duì)象表示的是自定義參數(shù),每一次都不一樣,所以記錄一下;
問(wèn)題描述
之前最常用的map是方法是用來(lái)遍歷數(shù)組的。
const arr = [a, b, c] render(){ return ( <div> { arr.map((item,index)=>{ return ( <div key={index}>{item}</div> ) }) } </div> ) }
那對(duì)象的話,怎么遍歷呢?
- API: Object.keys()
- 作用:遍歷對(duì)象中的屬性
所以我們可以通過(guò)Object.keys(obj)來(lái)獲取該對(duì)象的所有屬性,根據(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)問(wè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>
這段代碼在頁(yè)面展示的時(shí)候,只展示屬性,那么為什么不展示值呢,這個(gè)就得從對(duì)象的點(diǎn)和中括號(hào)的區(qū)別說(shuō)起了。
下面選自《你不知道的JavaScript(上卷)》
簡(jiǎn)單的說(shuō)就是:
- 中括號(hào)法可以用變量作為屬性名,而點(diǎn)方法不可以;
- 中括號(hào)法可以用數(shù)字作為屬性名,而點(diǎn)語(yǔ)法不可以;
- 中括號(hào)法可以使用js的關(guān)鍵字和保留字作為屬性名,而點(diǎn)語(yǔ)法不可以 (盡量避免在變量或者屬性中使用關(guān)鍵字或保留字);
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
從零開(kāi)始搭建webpack+react開(kāi)發(fā)環(huán)境的詳細(xì)步驟
這篇文章主要介紹了從零開(kāi)始搭建webpack+react開(kāi)發(fā)環(huán)境的詳細(xì)步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05React實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表
這篇文章主要介紹了React如何實(shí)現(xiàn)一個(gè)高度自適應(yīng)的虛擬列表,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of?Router,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12VSCode配置react開(kāi)發(fā)環(huán)境的步驟
本篇文章主要介紹了VSCode配置react開(kāi)發(fā)環(huán)境的步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12在?React?Native?中使用?CSS?Modules的配置方法
有些前端工程師希望也能像開(kāi)發(fā) web 應(yīng)用那樣,使用 CSS Modules 來(lái)開(kāi)發(fā) React Native,本文將介紹如何在 React Native 中使用 CSS Modules,需要的朋友可以參考下2022-08-08react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07React項(xiàng)目中報(bào)錯(cuò):Parsing error: The keyword &a
ESLint 默認(rèn)使用的是 ES5 語(yǔ)法,如果你想使用 ES6 或者更新的語(yǔ)法,你需要在 ESLint 的配置文件如:.eslintrc.js等中設(shè)置 parserOptions,這篇文章主要介紹了React項(xiàng)目中報(bào)錯(cuò):Parsing error: The keyword 'import' is reservedeslint的問(wèn)題及解決方法,需要的朋友可以參考下2023-12-12ReactHook使用useState更新變量后,如何拿到變量更新后的值
這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03