您好,登錄后才能下訂單哦!
這篇文章主要介紹“react如何動(dòng)態(tài)修改style”,在日常操作中,相信很多人在react如何動(dòng)態(tài)修改style問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”react如何動(dòng)態(tài)修改style”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
react動(dòng)態(tài)修改style的方法:1、在需要修改樣式的元素上添加ref,其語法如“<div className='scroll-title clear-fix' ref={ this.manage }>”;2、通過動(dòng)態(tài)控制狀態(tài)的變化修改元素的樣式;3、通過在DOM中使用JS代碼實(shí)現(xiàn)不同DOM的展示與隱藏轉(zhuǎn)換。
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
React動(dòng)態(tài)修改元素樣式常用的方式有兩種:借助ref和通過動(dòng)態(tài)控制狀態(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'
方式一
邏輯代碼中設(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)有了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 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è)屬性
格式
在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;
}
- 每個(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 類名*/}
<h2 className="title">
<span className="text">登錄</span>
<span>登錄</span>
</h2>
<form className="login-form"></form>
</div>
)
}
到此,關(guān)于“react如何動(dòng)態(tài)修改style”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。