這篇文章主要介紹“react如何改變css樣式”，在日常操作中，相信很多人在react如何改變css樣式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”react如何改變css樣式”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站主營汝南網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),汝南h5成都小程序開發(fā)搭建,汝南網(wǎng)站營銷推廣歡迎汝南等地區(qū)企業(yè)咨詢

react改變css樣式的方法：1、動(dòng)態(tài)添加一個(gè)class來改變樣式，代碼如“<p className={this.state.display?"active":"active1"}></p>”；2、動(dòng)態(tài)添加一個(gè)style來改變樣式，代碼如“<p style={display2}></p>”。

react的兩種動(dòng)態(tài)改變css樣式的方法

第一種：動(dòng)態(tài)添加class，以點(diǎn)擊按鈕讓文字顯示隱藏為demo

import React, { Component, Fragment } from 'react';
import './style.css';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display: true
        }
        this.handleshow = this.handleshow.bind(this)
        this.handlehide = this.handlehide.bind(this)
    }
    render() {
        return (
            <Fragment>
                {/*動(dòng)態(tài)添加一個(gè)class來改變樣式*/}
                <p className={this.state.display?"active":"active1"}>你是我的唯一</p>
                <button onClick={this.handlehide}>點(diǎn)擊隱藏</button>
                <button onClick={this.handleshow}>點(diǎn)擊顯示</button>
            </Fragment>
        )
    }
    handleshow() {
        this.setState({
            display:true
        })
    }
    handlehide() {
        this.setState({
            display:false
        })
    }
}
export default Demo;

css代碼：

 .active{
      display: block;
  }
  .active1{
    display: none;
  }

第二種：動(dòng)態(tài)添加一個(gè)style，以點(diǎn)擊按鈕讓文字顯示隱藏為demo

import React, { Component, Fragment } from 'react';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display2: true
        }
        this.handleshow2 = this.handleshow2.bind(this)
        this.handlehide2 = this.handlehide2.bind(this)
    }
    render() {
        const display2 = {
            display:this.state.display2 ? 'block' : 'none'
        }
        return (
            <Fragment>
                 {/*動(dòng)態(tài)添加一個(gè)style來改變樣式*/}
                 <p style={display2}>你是我的唯一</p>
                <button onClick={this.handlehide2}>點(diǎn)擊隱藏2</button>
                <button onClick={this.handleshow2}>點(diǎn)擊顯示2</button>
            </Fragment>
        )
    }
    handleshow2() {
        this.setState({
            display2:true
        })
    }
    handlehide2() {
        this.setState({
            display2:false
        })
    }
}
export default Demo;

到此，關(guān)于“react如何改變css樣式”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

新聞標(biāo)題：react如何改變css樣式
文章網(wǎng)址：http://www.ekvhdxd.cn/article46/jiioeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、域名注冊(cè)、網(wǎng)站收錄、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)