React에서 스타일을 동적으로 수정하는 방법: 1. 스타일을 수정해야 하는 요소에 "

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 스타일을 동적으로 수정하는 방법은 무엇입니까?

React가 요소 스타일을 동적으로 수정하는 세 가지 방법에 대하여

React가 요소 스타일을 동적으로 수정합니다

React가 요소 스타일을 동적으로 수정하는 두 가지 일반적인 방법이 있습니다. ref를 사용하고 요소 스타일을 동적 제어를 통해 수정하는 것입니다. 상태 변경

1. ref를 사용하여 스타일을 동적으로 수정

수정이 필요한 요소에 ref를 추가하세요

<div className=&#39;scroll-title clear-fix&#39; ref={ this.manage }>

로그인 후 복사

생성자에 React.createRef()를 추가하세요

this.manage = React.createRef()

로그인 후 복사

로직 코드에 사용하세요

this.manage.current.style.display = 'block'

로그인 후 복사

코드가 인식되지 않으면 let that = this

that.manage.current.style.display = 'block'

로그인 후 복사

2를 통해 this의 포인터를 변경해야 합니다. 상태 변경의 동적 제어를 통해 요소의 스타일을 수정합니다(두 가지 방법).

방법 1

로직 코드에 설정 플래그 표시의 기본값은 해당 조건에 따라 true 또는 false로 변경한 다음 해당 스타일 이름을 DOM의 className 속성에 할당합니다. 스타일은 해당 스타일로 작성됩니다. 예:

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = &#39;block&#39;
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }

로그인 후 복사

<div className={this.state.display ? &#39;none&#39; : &#39;scroll-title }>

로그인 후 복사

방법 2

방법 2의 원리는 방법 1과 동일합니다. 논리 코드의 플래그 비트 표시를 true로 설정합니다. 기본적으로 해당 조건을 통해 표시 값을 true 또는 false로 변경한 후 해당 스타일 이름을 DOM의 className 속성에 할당하고 해당 스타일로 스타일을 작성한다는 차이점이 있습니다. 논리 코드는 DOM에서 판단되지 않고 js에서 다음과 같이 판단됩니다.

3. DOM

에서 JS 코드(삼항 연산자)를 사용하여 다양한 DOM의 표시 및 숨기기 변환을 실현합니다

방법 3은 엄밀한 의미에서 스타일을 변경하는 것이 아니라 단지 표시를 변경하고 해당 구성 요소를 숨기고 표시하는 데 사용됩니다.

요약하자면:

변경된 스타일이 점점 더 복잡해지는 경우 , 2

• 를 사용하세요. 변경된 스타일이 너무 많지 않으면 1과 2를 사용하세요
• 단지 두 컴포넌트를 전환하는 경우(Hidden으로 표시됨) 3
React 스타일 충돌 문제

를 사용하는 것이 가장 편리합니다. React 스캐폴딩에 이미 Sass 구성이 있으므로 sass 종속성 패키지만 설치하면 sass를 직접 사용할 수 있습니다

Sass 종속성 패키지 설치

npm i sass -D

로그인 후 복사

- index.css를 index로 변경합니다. scss

- index.scss 파일 가져오기

참고: scss를 사용하는 경우 scss에서 이미지의 절대 경로를 사용할 때 ~를 추가해야 합니다~

background-image: url(~assets/login.png);

로그인 후 복사

css -스타일 민영화

css 모듈-기본 사용법

단계

1. 스타일 파일 이름을 변경합니다. xx.scss -> xx.module.scss (일반 CSS와 구별되는 React 스캐폴딩 관례)

2.

스타일 파일을 구성 요소로 가져옵니다(구문 참고)

import styles from './index.module.scss'

로그인 후 복사

스타일 개체를 통해 개체의 스타일 이름에 액세스하여 스타일을 설정합니다.

<div className={styles.css类名}></div>

로그인 후 복사

CSS 클래스 이름은 다음에 정의되어 있습니다. index.module.scss 클래스 이름.

예

스타일 정의 index.module.css

.root {font-size: 100px;}

스타일 사용

import styles from './index.module.css'
<div className={styles.root}>div的内容</div>

로그인 후 복사

원칙

CSS 모듈 s 자동으로 클래스 이름 보충 클래스 이름의 고유성을 보장하여 스타일 충돌 문제를 방지합니다.

CSS 모듈에 대한 참고 사항

최종 클래스 이름이 다음 속성을 생성하므로 클래스 이름에 낙타 표기법을 사용하는 것이 가장 좋습니다. styles

cssModules- 클래스 이름 유지

Format

xxx.module.scss에서 클래스 이름을 유지하려면

:global(.classname)

/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */
:global(.a) {   }
 
/* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */
.aa :golbal(.a) { }

로그인 후 복사

형식을 사용할 수 있습니다. 타사 구성 요소의 스타일 재정의

:global(.ant-btn) {
  color: red !important;
}

로그인 후 복사

css 모듈 - 모범 사례

- 각 구성 요소의 루트 노드는 CSSModules 형식의 클래스 이름을 사용합니다(루트 요소의 클래스 이름: root )

- 모두 다른 하위 노드는 일반 CSS 클래스 이름을 사용합니다. global

index.module.scss

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

로그인 후 복사

에서

import styles from './index.module.scss'
const 组件 = () => {
  return (
    {/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}
      

      {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
        

          登录  
          登录  
      
            

    
  )
}

로그인 후 복사

구성 요소를 사용하세요.

추천 학습: "react 비디오 튜토리얼"