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

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

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

좋은 웹페이지 즐겨찾기