react實(shí)現(xiàn)換膚功能的示例代碼
更新時(shí)間：2018年08月14日 10:00:49 作者：秋収冬藏
這篇文章主要介紹了react實(shí)現(xiàn)換膚功能的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一.目標(biāo)
提供幾種主題色給用戶選擇，然后根據(jù)用戶的選擇改變應(yīng)用的主題色；
二.實(shí)現(xiàn)原理
1.準(zhǔn)備不同主題色的樣式文件；
2.將用戶的選擇記錄在本地緩存中；
3.每次進(jìn)入應(yīng)用時(shí)，讀取緩存，根據(jù)緩存的信息判斷要加載哪個(gè)樣式文件即可；
三.具體實(shí)現(xiàn)思路
1.準(zhǔn)備四個(gè)對(duì)應(yīng)不同主題色的樣式文件：
2.在主頁(yè)給用戶提供主題色選擇的html：
```
<span style={{color:"#0097e5"}} >
<i className={`skinTag skinTag0 ${this.state.skinIndex==0?'active':''}`} onClick={this.toggleSkin.bind(this,0)}></i>
<i className={`skinTag skinTag1 ${this.state.skinIndex==1?'active':''}`} onClick={this.toggleSkin.bind(this,1)}></i>
<i className={`skinTag skinTag2 ${this.state.skinIndex==2?'active':''}`} onClick={this.toggleSkin.bind(this,2)}></i>
<i className={`skinTag skinTag3 ${this.state.skinIndex==3?'active':''}`} onClick={this.toggleSkin.bind(this,3)}></i>
</span>
toggleSkin(index){
setItem('skin',index) //將最新的主題色名稱更新到本地緩存中
this.loadingToast('主題色更換中..')
location.reload() //主題色更改后刷新頁(yè)面
}
```
3.主題色選擇后，在入口文件根據(jù)緩存判斷要加載哪個(gè)主題色樣式：
var aa=''
if(getItem('skin')=='0'){
aa='app'
}else if(getItem('skin')=='1'){
aa='app-skin1'
}else if(getItem('skin')=='2'){
aa='app-skin2'
}else if(getItem('skin')=='3'){
aa='app-skin3'
}else{
aa='app'
}
require([`./static/css/${aa}.scss`], function(list){});
在這里遇到了一個(gè)坑，剛開(kāi)始的時(shí)候我是直接用 require(./static/css/${aa}.scss);的，結(jié)果不知道為什么把四個(gè)樣式文件都加載了，改成上面那個(gè)就沒(méi)問(wèn)題了，有空再研究一下require；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例
輪播組件是常見(jiàn)的一種方式,用來(lái)展示圖像、信息或者是廣告,本文就來(lái)介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了React組件通信,在開(kāi)發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-12-12
使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑
相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場(chǎng)景，本文主要介紹了使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑，感興趣的可以了解一下2021-05-05
Remix路由模塊輸出對(duì)象loader函數(shù)詳解
這篇文章主要為大家介紹了Remix路由模塊輸出對(duì)象loader函數(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-04-04
React Zustand狀態(tài)管理庫(kù)的使用詳解
Zustand是一個(gè)為React和瀏覽器環(huán)境設(shè)計(jì)的輕量級(jí)狀態(tài)管理庫(kù),由Vercel開(kāi)發(fā),它特點(diǎn)包括輕量級(jí)、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項(xiàng)目,Zustand還支持TypeScript,提供類型安全的支持2024-09-09
詳解React Native 屏幕適配（炒雞簡(jiǎn)單的方法）
React Native 可以開(kāi)發(fā) ios 和 android 的 app，在開(kāi)發(fā)過(guò)程中，勢(shì)必會(huì)遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡(jiǎn)單的方法），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
React項(xiàng)目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，本篇文章主要介紹了React路由管理之React Router總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了React 代碼共享最佳實(shí)踐方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-05-05
useCallback是用來(lái)幫忙緩存函數(shù)的,當(dāng)依賴項(xiàng)沒(méi)有發(fā)生變化時(shí),返回緩存的指針,而props涉及到復(fù)雜對(duì)象類型都是通過(guò)指針來(lái)傳遞到,下面這篇文章主要給大家介紹了關(guān)于useCallback使用的相關(guān)資料,需要的朋友可以參考下2023-02-02