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