详解react的两种动态改变css样式的方法

Bertha 。 2022-10-15 00:43 165阅读 0赞

第一种：动态添加class，以点击按钮让文字显示隐藏为demo  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
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代码：

1  
2  
3  
4  
5  
6  
.active\{  
display: block;  
\}  
.active1\{  
display: none;  
\}  
第二种：动态添加一个style，以点击按钮让文字显示隐藏为demo  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
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属性就会看起复杂。都是个人观点，不足请指出