通过className的true或者false控制元素显示或者隐藏。
App.js
import React, { Component } from 'react'; import './App.css' class App extends Component { constructor(props) { super(props); this.state = { show:true, text:'隐藏' } } render() { return ( <div> <p className={this.state.show?'show':'hide'}>文字</p> <button onClick={this.toggle}>{this.state.text}</button> </div> ); } toggle =()=>{ var show = this.state.show; var text = this.state.text; if(show){ show =false text = '显示' }else{ show = true text = '隐藏' } this.setState({ show:show, text:text }) } } export default App;
App.css
.show{ opacity: 1; transition: .5s all ease-in; } .hide{ opacity: 0; transition: .5s all ease-in; }