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的內(nèi)容</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 包裹其他子節(jié)點的類名。此時，這些類名就不會被處理，在 JSX 中使用時，就可以用字符串形式的類名
  // 如果不加 :global ，所有類名就必須添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

??

import styles from './index.module.scss'
const 組件 = () => {
  return (
    {/* （1） 根節(jié)點使用 CSSModules 形式的類名（ 根元素的類名： `root` ）*/}
      

      {/* （2） 所有子節(jié)點，都使用普通的 CSS 類名*/}
        

          登錄  
          登錄  
      
            

    
  )
}

?? ??? ?????.

?? ??: "react ??? ????"