详解react的两种动态改变css样式的方法
短信预约 -IT技能 免费直播动态提醒
第一种：动态添加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>
{}
<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>
{}
<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的两种动态改变css样式的方法的文章就介绍到这了,更多相关react动态改变css样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
