介绍 import 反应,,{,组件,Fragment },得到& # 39;反应# 39;;
import & # 39;。/style.css& # 39;;
{class Demo extends 组件
,,,构造函数(道具),{
,,,,,,,超级(道具);
,,,,,,,this.state =, {
,,,,,,,,,,,显示:真实
,,,,,,,}
,,,,,,,this.handleshow =, this.handleshow.bind(这)
,,,,,,,this.handlehide =, this.handlehide.bind(这)
,,,}
,,,渲染(),{
,,,,,,,return (
,,,,,,,,,,,& lt; Fragment>
,,,,,,,,,,,,,,,{/*动态添加一个类来改变样式*/}
,,,,,,,,,,,,,,,& lt; p className={this.state.display ?“active":“active1"}祝辞;你是我的唯一& lt;/p>
,,,,,,,,,,,,,,,& lt; button onClick={this.handlehide}祝辞点击隐藏& lt;/button>
,,,,,,,,,,,,,,,& lt; button onClick={this.handleshow}祝辞点击显示& lt;/button>
,,,,,,,,,,,& lt;/Fragment>
,,,,,,,)
,,,}
,,,handleshow (), {
,,,,,,,this.setState ({
,,,,,,,,,,,显示:没错
,,,,,,,})
,,,}
,,,handlehide (), {
,,,,,,,this.setState ({
,,,,,,,,,,,显示:假的
,,,,,,,})
,,,}
}
export default 演示; , .active {
,,,,,显示:,块;
,,}
.active1{才能
,,,显示:,没有;
,,} import 反应,,{,组件,Fragment },得到& # 39;反应# 39;;
{class Demo extends 组件
,,,构造函数(道具),{
,,,,,,,超级(道具);
,,,,,,,this.state =, {
,,,,,,,,,,,display2:真实
,,,,,,,}
,,,,,,,this.handleshow2 =, this.handleshow2.bind(这)
,,,,,,,this.handlehide2 =, this.handlehide2.bind(这)
,,,}
,,,渲染(),{
,,,,,,,const display2 =, {
,,,,,,,,,,,显示:this.state.display2 ?, & # 39;块# 39;,:,& # 39;没有# 39;
,,,,,,,}
,,,,,,,return (
,,,,,,,,,,,& lt; Fragment>
,,,,,,,,,,,,,,,,{/*动态添加一个风格来改变样式*/}
,,,,,,,,,,,,,,,,& lt; p 风格={display2}祝辞;你是我的唯一& lt;/p>
,,,,,,,,,,,,,,,& lt; button onClick={this.handlehide2}祝辞点击隐藏2 & lt;/button>
,,,,,,,,,,,,,,,& lt; button onClick={this.handleshow2}祝辞点击显示2 & lt;/button>
,,,,,,,,,,,& lt;/Fragment>
,,,,,,,)
,,,}
,,,handleshow2 (), {
,,,,,,,this.setState ({
,,,,,,,,,,,display2:没错
,,,,,,,})
,,,}
,,,handlehide2 (), {
null
null
null
null
null
null
本篇文章为大家展示了使用反应怎么动态改变css样式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
第一种:动态添加课,以点击按钮让文字显示隐藏为演示
css代码:
