【资料图】
本教程操作环境：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 ( {/*动态添加一个class来改变样式*/} 你是我的唯一
) } 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 ( {/*动态添加一个style来改变样式*/} 你是我的唯一
) } handleshow2() { this.setState({ display2:true }) } handlehide2() { this.setState({ display2:false }) }}export default Demo;登录后复制总结：用class来改变css样式，可以写多个动态改变的css属性，看起不杂乱，而用style写的话，如果写多个css属性就会看起复杂。都是个人观点，不足请指出
推荐学习：《react视频教程》
以上就是react 怎么改变css样式的详细内容，更多请关注php中文网其它相关文章！
