需求:
点击Button按钮让内容在显示与隐藏中切换
import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';
class App extends Component {
state={
persons:[
{
name:"周家大小姐"
}
],
showPreson:false,
};
// 显示隐藏
click =()=>{
const doesShow = this.state.showPreson;
this.setState({//点击的时候取反
showPreson:!doesShow
})
}
render() {
return (
<div className="App">
<button onClick={this.click}>显示与隐藏</button>
{
this.state.showPreson ?
<Footer name={this.state.persons[0].name} v-if="showPreson"/> : null
}
</div>
);
}
}
export default App;
以上方式写入之后你会发现结构有点乱,其实可以在优化一下: