react实现换肤功能的示例代码
更新时间：2018年08月14日 10:00:49 作者：秋収冬藏
这篇文章主要介绍了react实现换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一.目标
提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色；
二.实现原理
1.准备不同主题色的样式文件；
2.将用户的选择记录在本地缓存中；
3.每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可；
三.具体实现思路
1.准备四个对应不同主题色的样式文件：
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.主题色选择后，在入口文件根据缓存判断要加载哪个主题色样式：
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);的，结果不知道为什么把四个样式文件都加载了，改成上面那个就没问题了，有空再研究一下require；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。接下来通过本文给大家分享React Hooks使用避坑指南，一起学习下吧2021-06-06
Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
React中使用react-json-view展示JSON数据的操作方法
react-json-view是一个用于显示和编辑javascript数组和JSON对象的React组件,本文给大家分享React中使用react-json-view展示JSON数据的操作方法,感兴趣的朋友一起看看吧2023-12-12
详解webpack + react + react-router 如何实现懒加载
这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-11-11
这篇文章主要介绍了React之防止按钮多次点击事件 重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于React组件重构之嵌套+继承及高阶组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点，这篇文章主要介绍了ReactJS入门实例教程,需要的朋友可以参考下2022-06-06
MUI是一款基于React的UI组件库，可以方便地构建美观的用户界面，使用MUI的DataTable组件和分页器组件可以轻松实现用户列表分页功能，这篇文章使用MUI库实现了用户列表分页功能，感兴趣的同学可以参考下文2023-05-05
本篇文章主要介绍了详解升级react-router 4 踩坑指南，主要是对react-router 4升级的踩坑总结，有兴趣的可以了解一下2017-08-08
最新评论