react實現(xiàn)換膚功能的示例代碼

更新時間：2018年08月14日 10:00:49 作者：秋収冬藏

這篇文章主要介紹了react實現(xiàn)換膚功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一.目標(biāo)

提供幾種主題色給用戶選擇，然后根據(jù)用戶的選擇改變應(yīng)用的主題色；

二.實現(xiàn)原理

1.準(zhǔn)備不同主題色的樣式文件；

2.將用戶的選擇記錄在本地緩存中；

3.每次進入應(yīng)用時，讀取緩存，根據(jù)緩存的信息判斷要加載哪個樣式文件即可；

三.具體實現(xiàn)思路

1.準(zhǔn)備四個對應(yīng)不同主題色的樣式文件：

 ![](https://images2018.jb51.net/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

2.在主頁給用戶提供主題色選擇的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()    //主題色更改后刷新頁面
 }

```

3.主題色選擇后，在入口文件根據(jù)緩存判斷要加載哪個主題色樣式：

  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){});

在這里遇到了一個坑，剛開始的時候我是直接用 require(./static/css/${aa}.scss);的，結(jié)果不知道為什么把四個樣式文件都加載了，改成上面那個就沒問題了，有空再研究一下require；

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react
換膚

相關(guān)文章

淺談React之狀態(tài)(State)
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
React實現(xiàn)動態(tài)輪播圖的使用示例
輪播組件是常見的一種方式,用來展示圖像、信息或者是廣告,本文就來介紹一下React實現(xiàn)動態(tài)輪播圖的使用示例,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
React組件通信淺析
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下
2022-12-12
使用react-beautiful-dnd實現(xiàn)列表間拖拽踩坑
相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場景，本文主要介紹了使用react-beautiful-dnd實現(xiàn)列表間拖拽踩坑，感興趣的可以了解一下
2021-05-05
Remix路由模塊輸出對象loader函數(shù)詳解
這篇文章主要為大家介紹了Remix路由模塊輸出對象loader函數(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
2023-04-04
React Zustand狀態(tài)管理庫的使用詳解
Zustand是一個為React和瀏覽器環(huán)境設(shè)計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持
2024-09-09
詳解React Native 屏幕適配（炒雞簡單的方法）
React Native 可以開發(fā) ios 和 android 的 app，在開發(fā)過程中，勢必會遇上屏幕適配，這篇文章主要介紹了詳解React Native 屏幕適配（炒雞簡單的方法），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
React路由管理之React Router總結(jié)
React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，本篇文章主要介紹了React路由管理之React Router總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
詳解React 代碼共享最佳實踐方式
這篇文章主要介紹了React 代碼共享最佳實踐方式,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-05-05
一文帶你搞懂useCallback的使用方法
useCallback是用來幫忙緩存函數(shù)的,當(dāng)依賴項沒有發(fā)生變化時,返回緩存的指針,而props涉及到復(fù)雜對象類型都是通過指針來傳遞到,下面這篇文章主要給大家介紹了關(guān)于useCallback使用的相關(guān)資料,需要的朋友可以參考下
2023-02-02