react改变css样式的方法：1、动态添加一个class来改变样式，代码如“”；2、动态添加一个style来改变样式，代码如“”。
本教程操作环境：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样式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2922967.html
