react 피부 교환 기능 구현 예시 코드

목표
몇 가지 주제 색 을 사용자 에 게 선택 한 다음 에 사용자 의 선택 에 따라 응용 주제 색 을 바 꿉 니 다.

실현 원리
1.서로 다른 테마 색 의 스타일 파일 준비 하기;
2.사용자 의 선택 을 로 컬 캐 시 에 기록 합 니 다.
3.응용 프로그램 에 들 어 갈 때마다 캐 시 를 읽 고 캐 시 정보 에 따라 어떤 스타일 파일 을 불 러 올 지 판단 하면 됩 니 다.
3.구체 적 으로 사고 방향 을 실현 한다.
1.서로 다른 테마 색 에 대응 하 는 스타일 파일 네 개 준비 하기:

 ![](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.테마 색 을 선택 한 후 입구 파일 에서 캐 시 에 따라 테마 색 스타일 을 불 러 올 지 판단 합 니 다.

  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 를 다시 연구 하 세 요.
 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.