技術文章 » react 怎麼動態修改style

react 怎麼動態修改style

2022-12-28 14:00:44

react動態修改style的方法：1、在需要修改樣式的元素上新增ref，其語法如「<div className='scroll-title clear-fix' ref={ this.manage }>」；2、通過動態控制狀態的變化修改元素的樣式；3、通過在DOM中使用JS程式碼實現不同DOM的展示與隱藏轉換。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react 怎麼動態修改style？

關於React動態修改元素樣式的三種方式

React動態修改元素樣式

React動態修改元素樣式常用的方式有兩種：藉助ref和通過動態控制狀態的變化修改元素的樣式

1.藉助ref動態修改樣式

在需要修改樣式的元素上新增ref

<div className='scroll-title clear-fix' ref={ this.manage }>
登入後複製

在constructor中新增React.createRef()

this.manage = React.createRef()
登入後複製

在邏輯程式碼中使用

this.manage.current.style.display = 'block'
登入後複製

如果程式碼中識別不出this的話需要通過let that = this 改變this的指向

that.manage.current.style.display = 'block'
登入後複製

2.通過動態控制狀態的變化修改元素的樣式（兩種方式）

方式一

邏輯程式碼中設定一個標誌位display預設為true，通過對應的條件改變display的值為true或者false，進而將對應的樣式名賦值給DOM的className屬性，樣式寫在對應的style當中

例如：

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = 'block'
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }
登入後複製
<div className={this.state.display ? 'none' : 'scroll-title }>
登入後複製

方式二

方式二和方式一實現的原理是一樣的，邏輯程式碼中設定一個標誌位display預設為true，通過對應的條件改變display的值為true或者false，進而將對應的樣式名賦值給DOM的className屬性，樣式寫在對應的style當中，不同之處在於邏輯程式碼的判斷不是在DOM中，而是在js中判斷的，如下：

5ac6a18523a6456a57897685a33a437.jpg

3.通過在DOM中使用JS程式碼（三元運運算元）

實現不同DOM的展示與隱藏轉換

方式三並不是嚴格意義上的改變樣式，只是用來改變顯示與隱藏及展示對應的元件的

057eff8accc126dcf8412d8d1872efe.jpg

小結一下：

  • 如果改變的樣式比較多而雜使用 2
  • 如果改變的樣式不太多使用 1和2
  • 如果僅僅是兩個元件的切換（顯示與隱藏）使用 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 modules-基本使用

步驟

1.改樣式檔名。從 xx.scss -> xx.module.scss （React腳手架中的約定，與普通 CSS 作區分）

2.引入使用。

  • 元件中匯入該樣式檔案（注意語法）
import styles from './index.module.scss'
登入後複製
  • 通過 styles 物件存取物件中的樣式名來設定樣式
<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 Modules 通過自動給 CSS 類名補足類名，保證類名的唯一性，從而避免樣式衝突的問題

css module的注意點

類名最好使用駝峰命名，因為最終類名會生成styles的一個屬性

cssModules-維持類名

格式

在xxx.module.scss中，如果希望維持類名，可以使用格式：

:global(.類名)

/*這樣css modules就不會修改掉類名.a了。等價於寫在 index.css中 */
:global(.a) {   }
 
/* 這樣css modules就不會修改掉類名.a了, 但是 .aa還是會被修改 */
.aa :golbal(.a) { }
登入後複製

覆蓋第三方元件的樣式

:global(.ant-btn) {
  color: red !important;
}
登入後複製

css modules-最佳實踐

- 每個元件的根節點使用 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` ）*/}
      <div className={styles.root}>
      {/* （2） 所有子節點，都使用普通的 CSS 類名*/}
        <h1 className="title">
          <span className="text">登入</span>  
          <span>登入</span>  
      </h1>
            <form className="login-form"></form>
    </div>
  )
}
登入後複製

推薦學習：《》

以上就是react 怎麼動態修改style的詳細內容，更多請關注TW511.COM其它相關文章！