使用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-native ListView下拉刷新上拉加載實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native ListView下拉刷新上拉加載實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了React Hooks的深入理解與使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
使用useMutation和React Query發(fā)布數(shù)據(jù)demo
這篇文章主要為大家介紹了使用useMutation和React Query發(fā)布數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)
這篇文章主要給大家介紹了關(guān)于React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用React具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單
antd是react流行的ui框架庫(kù)，本文主要介紹了react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單，分享給大家，感興趣的小伙伴們可以參考一下2021-06-06
react-routerV6版本和V5版本的詳細(xì)對(duì)比
React-Router5是React-Router6的前一個(gè)版本,它已經(jīng)被React-Router6取代,React-Router 6是一次較大的重大更新,本文就來(lái)介紹一下react-routerV6版本和V5版本的詳細(xì)對(duì)比,感興趣的可以了解一下2023-12-12
React.memo函數(shù)中的參數(shù)示例詳解
這篇文章主要為大家介紹了React.memo函數(shù)中的參數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
react使用antd-design中select不能及時(shí)刷新問(wèn)題及解決
這篇文章主要介紹了react使用antd-design中select不能及時(shí)刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用react context 實(shí)現(xiàn)vue插槽slot功能
這篇文章主要介紹了使用react context 實(shí)現(xiàn)vue插槽slot功能，文中給大家介紹了vue的slot的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-07
react中使用redux-persist做持久化儲(chǔ)存的過(guò)程記錄
這篇文章主要介紹了react中使用redux-persist做持久化儲(chǔ)存的相關(guān)資料,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01