react實(shí)現(xiàn)換膚功能的示例代碼
一.目標(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) //將最新的主題色名稱(chēng)更新到本地緩存中
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)文章
前端開(kāi)發(fā)使用Ant Design項(xiàng)目評(píng)價(jià)
這篇文章主要為大家介紹了前端開(kāi)發(fā)使用Ant Design項(xiàng)目評(píng)價(jià)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
關(guān)于react-router-dom路由入門(mén)教程
這篇文章主要介紹了關(guān)于react-router-dom路由入門(mén)教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細(xì)用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了react定位組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React中使用collections時(shí)key的重要性詳解
這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時(shí)key的重要性，注意：一定不能不能忘了key，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例
滾動(dòng)在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
阿里低代碼框架lowcode-engine設(shè)置默認(rèn)容器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine設(shè)置默認(rèn)容器詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
解決React報(bào)錯(cuò)Cannot?find?namespace?context
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react.js使用webpack搭配環(huán)境的入門(mén)教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門(mén)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要介紹了react-router4按需加載(踩坑填坑)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01