reac은 피부색을 변경하는 기능을 어떻게 구현하나요?

이 글의 내용은 Reac에서 피부색 변경 기능을 구현하는 방법에 대한 내용입니다. 참고가 필요한 친구들에게 도움이 되었으면 좋겠습니다.

1. 목표

사용자가 선택할 수 있는 여러 가지 테마 색상을 제공하고, 사용자의 선택에 따라 애플리케이션의 테마 색상을 변경합니다.

2. 구현 원칙

다양한 테마 색상

2. 로컬 캐시에 사용자 선택 기록

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!