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