reac は肌の色を変更する機能をどのように実装していますか?

この記事の内容は、Reac での肌の色を変更する機能の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

1. 目標

ユーザーが選択できるいくつかのテーマの色を提供し、ユーザーの選択に従ってアプリケーションのテーマの色を変更します

2. スタイルファイルを準備します。さまざまなテーマの色

2. ユーザーの選択をローカル キャッシュに記録します

3. アプリケーションに入るたびにキャッシュを読み取り、キャッシュされた情報に基づいてどのスタイル ファイルをロードするかを決定します

3. 具体的な実装のアイデア

1. 異なるテーマの色に対応する 4 つのスタイル ファイルを準備します:

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

2. ホームページでテーマの色の選択用の HTML を提供します:

 "
   <span>
               <i></i>
               <i></i>
               <i></i>
               <i></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(

); を直接使用していましたが、なぜ 4 つのスタイル ファイルがすべてロードされるのかわかりませんでした。問題はありませんでした。時間があればもう一度試してみます。関連する推奨事項:

./static/css/${aa}.scss

jQuery でよく使用されるメソッドとは何ですか? js閉鎖? js クロージャーを理解する (コード付き)

以上がreac は肌の色を変更する機能をどのように実装していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。