快捷導(dǎo)航

關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式

更新時(shí)間：2022年08月03日 14:37:15 作者：A豐休

這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React動(dòng)態(tài)修改元素樣式

React動(dòng)態(tài)修改元素樣式常用的方式有兩種：借助ref和通過動(dòng)態(tài)控制狀態(tài)的變化修改元素的樣式

1.借助ref動(dòng)態(tài)修改樣式

在需要修改樣式的元素上添加ref

<div className='scroll-title clear-fix' ref={ this.manage }>

在constructor中添加React.createRef()

this.manage = React.createRef()

在邏輯代碼中使用

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

如果代碼中識(shí)別不出this的話需要通過let that = this 改變this的指向

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

2.通過動(dòng)態(tài)控制狀態(tài)的變化修改元素的樣式（兩種方式）

方式一

邏輯代碼中設(shè)置一個(gè)標(biāo)志位display默認(rèn)為true，通過對(duì)應(yīng)的條件改變display的值為true或者false，進(jìn)而將對(duì)應(yīng)的樣式名賦值給DOM的className屬性，樣式寫在對(duì)應(yīng)的style當(dāng)中

例如：

?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 }>

方式二

方式二和方式一實(shí)現(xiàn)的原理是一樣的，邏輯代碼中設(shè)置一個(gè)標(biāo)志位display默認(rèn)為true，通過對(duì)應(yīng)的條件改變display的值為true或者false，進(jìn)而將對(duì)應(yīng)的樣式名賦值給DOM的className屬性，樣式寫在對(duì)應(yīng)的style當(dāng)中，不同之處在于邏輯代碼的判斷不是在DOM中，而是在js中判斷的，如下：

3.通過在DOM中使用JS代碼（三元運(yùn)算符）

實(shí)現(xiàn)不同DOM的展示與隱藏轉(zhuǎn)換

方式三并不是嚴(yán)格意義上的改變樣式，只是用來改變顯示與隱藏及展示對(duì)應(yīng)的組件的

小結(jié)一下：

如果改變的樣式比較多而雜使用 2
如果改變的樣式不太多使用 1和2
如果僅僅是兩個(gè)組件的切換（顯示與隱藏）使用 3最方便

React樣式?jīng)_突問題

在react腳手架中已經(jīng)有了sass的配置，因此只需要安裝sass的依賴包，就可以直接使用sass了

安裝sass依賴包

npm i sass -D?

- 把index.css改成index.scss

- 導(dǎo)入index.scss文件

注意：如果使用了scss，scss中使用圖片的絕對(duì)路徑的時(shí)候需要加上~

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

css-樣式私有化

css modules-基本使用

步驟

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

2.引入使用。

組件中導(dǎo)入該樣式文件（注意語法）

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

通過 styles 對(duì)象訪問對(duì)象中的樣式名來設(shè)置樣式

<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 Modules 通過自動(dòng)給 CSS 類名補(bǔ)足類名，保證類名的唯一性，從而避免樣式?jīng)_突的問題

css module的注意點(diǎn)

類名最好使用駝峰命名，因?yàn)樽罱K類名會(huì)生成styles的一個(gè)屬性

cssModules-維持類名

格式

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

:global(.類名)

/*這樣css modules就不會(huì)修改掉類名.a了。等價(jià)于寫在 index.css中 */
:global(.a) { ? }
?
/* 這樣css modules就不會(huì)修改掉類名.a了, 但是 .aa還是會(huì)被修改 */
.aa :golbal(.a) { }

覆蓋第三方組件的樣式

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

css modules-最佳實(shí)踐

- 每個(gè)組件的根節(jié)點(diǎn)使用 CSSModules 形式的類名（根元素的類名： root ）

- 其他所有的子節(jié)點(diǎn)，都使用普通的 CSS 類名 :global

index.module.scss中

// index.module.scss
.root {
? display: 'block';
? position: 'absolute';
? // 此處，使用 global 包裹其他子節(jié)點(diǎn)的類名。此時(shí)，這些類名就不會(huì)被處理，在 JSX 中使用時(shí)，就可以用字符串形式的類名
? // 如果不加 :global ，所有類名就必須添加 styles.title 才可以
? :global {
? ? .title {
? ? ? .text {
? ? ? }
? ? ? span {
? ? ? }
? ? }
? ? .login-form { ... }
? }
}

組件使用

import styles from './index.module.scss'
const 組件 = () => {
? return (
? ? {/* （1） 根節(jié)點(diǎn)使用 CSSModules 形式的類名（ 根元素的類名： `root` ）*/}
? ?? ?<div className={styles.root}>
? ? ? {/* （2） 所有子節(jié)點(diǎn)，都使用普通的 CSS 類名*/}
? ? ?? ?<h1 className="title">
? ? ? ?? ?<span className="text">登錄</span> ?
? ? ? ?? ?<span>登錄</span> ?
? ? ? </h1>
?? ??? ??? ?<form className="login-form"></form>
? ? </div>
? )
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: