網(wǎng)站首頁 編程語言 正文
循環(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è)需求,是要接收后臺返回的一個(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(上卷)》
簡單的說就是:
- 中括號法可以用變量作為屬性名,而點(diǎn)方法不可以;
- 中括號法可以用數(shù)字作為屬性名,而點(diǎn)語法不可以;
- 中括號法可以使用js的關(guān)鍵字和保留字作為屬性名,而點(diǎn)語法不可以 (盡量避免在變量或者屬性中使用關(guān)鍵字或保留字);
原文鏈接:https://blog.csdn.net/Lockey23/article/details/89632834
相關(guān)推薦
- 2023-03-13 Android?Hilt依賴注入的使用講解_Android
- 2022-01-16 jQuery 核心函數(shù)和事件處理
- 2022-03-24 c++中的bind使用方法_C 語言
- 2022-11-01 詳解C++中函數(shù)模板的定義與使用_C 語言
- 2023-01-23 redis實(shí)現(xiàn)多級緩存同步方案詳解_Redis
- 2022-11-27 C語言中花式退出程序的方式總結(jié)_C 語言
- 2023-04-27 解讀react的onClick自動觸發(fā)等相關(guān)問題_React
- 2022-04-16 Python數(shù)據(jù)結(jié)構(gòu)與算法之跳表詳解_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支