<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react 怎么改變css樣式-今日熱門

          來源:php中文網 | 2022-12-30 10:02:50 |


          (資料圖片僅供參考)

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

          react 怎么改變css樣式?

          react的兩種動態改變css樣式的方法

          第一種:動態添加class,以點擊按鈕讓文字顯示隱藏為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>                {/*動態添加一個class來改變樣式*/}                <p className={this.state.display?"active":"active1"}>你是我的唯一</p>                <button onClick={this.handlehide}>點擊隱藏</button>                <button onClick={this.handleshow}>點擊顯示</button>            </Fragment>        )    }    handleshow() {        this.setState({            display:true        })    }    handlehide() {        this.setState({            display:false        })    }}export default Demo;

          css代碼:

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

          第二種:動態添加一個style,以點擊按鈕讓文字顯示隱藏為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>                 {/*動態添加一個style來改變樣式*/}                 <p style={display2}>你是我的唯一</p>                <button onClick={this.handlehide2}>點擊隱藏2</button>                <button onClick={this.handleshow2}>點擊顯示2</button>            </Fragment>        )    }    handleshow2() {        this.setState({            display2:true        })    }    handlehide2() {        this.setState({            display2:false        })    }}export default Demo;

          總結:用class來改變css樣式,可以寫多個動態改變的css屬性,看起不雜亂,而用style寫的話,如果寫多個css屬性就會看起復雜。都是個人觀點,不足請指出

          推薦學習:《react視頻教程》

          以上就是react 怎么改變css樣式的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>