關(guān)于React動態(tài)修改元素樣式的三種方式
React動態(tài)修改元素樣式
React動態(tài)修改元素樣式常用的方式有兩種:借助ref和通過動態(tài)控制狀態(tài)的變化修改元素的樣式
1.借助ref動態(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'
如果代碼中識別不出this的話需要通過let that = this 改變this的指向
that.manage.current.style.display = 'block'
2.通過動態(tài)控制狀態(tài)的變化修改元素的樣式(兩種方式)
方式一
邏輯代碼中設(shè)置一個標(biāo)志位display默認(rèn)為true,通過對應(yīng)的條件改變display的值為true或者false,進(jìn)而將對應(yīng)的樣式名賦值給DOM的className屬性,樣式寫在對應(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è)置一個標(biāo)志位display默認(rèn)為true,通過對應(yīng)的條件改變display的值為true或者false,進(jìn)而將對應(yīng)的樣式名賦值給DOM的className屬性,樣式寫在對應(yīng)的style當(dāng)中,不同之處在于邏輯代碼的判斷不是在DOM中,而是在js中判斷的,如下:
3.通過在DOM中使用JS代碼(三元運(yùn)算符)
實(shí)現(xiàn)不同DOM的展示與隱藏轉(zhuǎn)換
方式三并不是嚴(yán)格意義上的改變樣式,只是用來改變顯示與隱藏及展示對應(yīng)的組件的
小結(jié)一下:
- 如果改變的樣式比較多而雜使用 2
- 如果改變的樣式不太多使用 1和2
- 如果僅僅是兩個組件的切換(顯示與隱藏)使用 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中使用圖片的絕對路徑的時候需要加上~
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 對象訪問對象中的樣式名來設(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 通過自動給 CSS 類名補(bǔ)足類名,保證類名的唯一性,從而避免樣式?jīng)_突的問題
css module的注意點(diǎn)
類名最好使用駝峰命名,因?yàn)樽罱K類名會生成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-最佳實(shí)踐
- 每個組件的根節(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)的類名。此時,這些類名就不會被處理,在 JSX 中使用時,就可以用字符串形式的類名 ? // 如果不加 :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> ? ) }
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04詳解開發(fā)react應(yīng)用最好用的腳手架 create-react-app
本篇文章主要介紹了詳解開發(fā)react應(yīng)用最好用的腳手架 create-react-app,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04React使用hook如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要介紹了React使用hook如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03從零搭建react+ts組件庫(封裝antd)的詳細(xì)過程
這篇文章主要介紹了從零搭建react+ts組件庫(封裝antd),實(shí)際上,代碼開發(fā)過程中,還有很多可以輔助開發(fā)的模塊、流程,本文所搭建的整個項(xiàng)目,我都按照文章一步一步進(jìn)行了git提交,開發(fā)小伙伴可以邊閱讀文章邊對照git提交一步一步來看2022-05-05webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04修復(fù)Next.js中window?is?not?defined方法詳解
這篇文章主要為大家介紹了修復(fù)Next.js中window?is?not?defined方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12