react改变css样式的两种方法

importReact,{Component,Fragment}from'react';
import'./style.css';
classDemoextendsComponent{
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
})
}
}
exportdefaultDemo;

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

importReact,{Component,Fragment}from'react';
classDemoextendsComponent{
constructor(props){
super(props);
this.state={
display2:true
}
this.handleshow2=this.handleshow2.bind(this)
this.handlehide2=this.handlehide2.bind(this)
}
render(){
constdisplay2免费云主机、域名={
display:this.state.display2?'block':'none'
}
return(

{/*动态添加一个style来改变样式*/}
你是我的唯一
点击隐藏2
点击显示2

)
}
handleshow2(){
this.setState({
display2:true
})
}
handlehide2(){
this.setState({
display2:false
})
}
}
exportdefaultDemo;