網(wǎng)站首頁 編程語言 正文
循環(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
相關(guān)推薦
- 2022-04-05 詳解C#如何實現(xiàn)讀寫ini文件_C#教程
- 2022-04-11 圖文詳解C#中的協(xié)變與逆變_C#教程
- 2022-06-19 python繪制橫向水平柱狀條形圖_python
- 2022-09-05 Redis 數(shù)據(jù)刪除策略
- 2022-12-26 使用python如何對圖片進(jìn)行壓縮_python
- 2022-06-25 pytorch中permute()函數(shù)用法補(bǔ)充說明(矩陣維度變化過程)_python
- 2023-03-29 Python本地搭建靜態(tài)Web服務(wù)器的實現(xiàn)_python
- 2023-01-13 Go簡單實現(xiàn)協(xié)程方法_Golang
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 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錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(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)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支