使用react遍歷對(duì)象生成dom
react遍歷對(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)鍵字或保留字)；
react中操作dom
當(dāng)我們?cè)趓eact中需要做一些dom操作時(shí)，就會(huì)使用到react給我們預(yù)留的“后門(mén)”。
之所以稱之為“后門(mén)”，是因?yàn)楫?dāng)前流行框架react/vue出現(xiàn)的目的就是避免操作dom，造成渲染浪費(fèi)。然而很多時(shí)候不能不操作dom。
1、通過(guò)React.createRef()/useRef();來(lái)創(chuàng)建一個(gè)ref變量。
// 類組件中
constructor (props) {
? ? super(props);
? ? this.myRef = React.createRef();
}
// 函數(shù)組件中（使用hooks）
const myRef = useRef();2、在對(duì)應(yīng)的dom節(jié)點(diǎn)上寫(xiě)入ref。
// 類組件
<div className="t-box scroll-bar" ref={this.myRef}>
?? ?...
</div>
// 函數(shù)組件
<div className="t-box scroll-bar" ref={myRef}>
?? ?...
</div>3、使用react-dom中的findDomNode()得到具體的dom。
import ReactDom from 'react-dom'; // 類組件 const getTargetDOM = ReactDom.findDOMNode(this.myRef.current); // 函數(shù)組件 const getTargetDOM = ReactDom.findDOMNode(myRef.current);
4、根據(jù)獲取的dom進(jìn)行一些dom操作即可。例如操作js盒模型、設(shè)置文字樣式等等。
// 設(shè)置向上滾動(dòng)距離 getTargetDOM.scrollTop = 1000; getTargetDOM.style.color = 'red';
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用詳解
這篇文章主要介紹了React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情
這篇文章主要介紹了React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情，每一個(gè)?hook?函數(shù)都有對(duì)應(yīng)的?hook?對(duì)象保存狀態(tài)信息，更多詳細(xì)分析，需要的朋友可以參考一下2022-07-07
React實(shí)現(xiàn)父組件調(diào)用子組件的兩種寫(xiě)法
react通信分很多種,比如：父子通信,兄弟通信等等,這里我們就簡(jiǎn)單說(shuō)一下父子通信,父子通信分為：父組件調(diào)用子組件里面的方法；子組件調(diào)用子組件里面的方法,這里我們著重說(shuō)一下父組件調(diào)用子組件,需要的朋友可以參考下2024-04-04
react+zarm實(shí)現(xiàn)底部導(dǎo)航欄的示例代碼
本文主要介紹了react?+?zarm?實(shí)現(xiàn)底部導(dǎo)航欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法
本篇文章主要介紹了react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
Context?提供了一個(gè)無(wú)需為每層組件手動(dòng)添加?props,就能在組件樹(shù)間進(jìn)行數(shù)據(jù)傳遞的方法,本文為大家整理了React使用Context的一些優(yōu)化建議,希望對(duì)大家有所幫助2024-04-04
lazy是React提供的懶（動(dòng)態(tài)）加載組件的方法，React.lazy()，路由組件代碼會(huì)被分開(kāi)打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能2023-03-03
Fiber可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React?Fiber就會(huì)檢查還剩多少時(shí)間，如果沒(méi)有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下<BR>2023-01-01
React Native提供自動(dòng)完成的下拉菜單的方法示例
這篇文章主要為大家介紹了React Native提供自動(dòng)完成的下拉菜單的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10