实现换肤功能的react示例代码

一.目标

提供几种主题颜色供用户选择，然后根据用户的选择更改应用的主题颜色；

二、实现原则

1.准备不同主题颜色的样式文件；

2.在本地缓存中记录用户的选择；

3.每次进入应用程序，读取缓存，根据缓存的信息判断加载哪个样式文件；

三.具体实现思路

1.准备四个对应不同主题颜色的样式文件：

！[](https://images 2018 . JB 51 . net/blog/1178432/201808/1178432-20180813142303707-1847250400 . png)2。在主页上为用户提供主题颜色选择的html:

` ` ` span style={ { color : ' # 0097 e 5 ' } } I class name={ ` Skintag Skintag 0 $ { this . state . Skinindex==0？active ' : ' ' } ` } OnClick={ this . toggleskin . bind(this，0)}/I I class name={ ` Skintag Skintag 1 $ { this . state . Skinindex==1？active ' : ' ' } ` } OnClick={ this . toggleskin . bind(this，1)}/I I class name={ ` Skintag Skintag 2 $ { this . state . Skinindex==2？active ' : ' ' } ` } OnClick={ this . toggleskin . bind(this，2)}/I I class name={ ` Skintag Skintag 3 $ { 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-skin 1 ' } else if(GetItem(' skin '=' 2 '){ aa=' app-skin 2 ' } else if(GetItem(' skin ')=' 3 '){ aa=' app-skin 3 ' } else { aa=' app ' } require([`。/static/css/${aa}.scss`]，function(list){ })；我在这里遇到了一个坑。我以前需要(。/static/CSS/$ {aa}。直接在开头。因此，我不知道为什么四个样式文件都被加载。换成上面的没问题。我会按要求学习；等我有时间再来；

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。