4. 条件渲染

src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  overflow: auto;
 }
 
 .App-logo {

src/App.js

@@ -115,6 +115,45 @@ function App() {
         e.stopPropagation()
     }
 
+    class IfComponent extends React.PureComponent {
+        state = {
+            show: true
+        }
+
+        show = ()=>{
+            this.setState((state)=>({
+                ...state,
+                show: true
+            }))
+        }
+
+        hide = ()=>{
+            this.setState((state)=>({
+                ...state,
+                show: false
+            }))
+        }
+
+        render(){
+            return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}>
+                <div>条件渲染</div>
+
+                {this.state.show && <div> IfComponent 显示 </div>}
+
+                <div style={{display: 'flex', justifyContent: "center"}}>
+                    <button onClick={this.hide}>隐藏</button>
+                    <button onClick={this.show}>显示</button>
+                </div>
+                <button onClick={()=>{
+                    this.setState((state)=>({
+                        ...state,
+                        show: !state.show
+                    }))
+                }}>切换</button>
+            </div>
+        }
+    }
+
     return (
         <div className="App">
             <header className="App-header">
@@ -149,6 +188,8 @@ function App() {
                     <button onClick={clickHandler3.bind(this, "按钮3")}>按钮3</button>
                     <button onClick={(e) => clickHandler3("按钮3", e)}>按钮3</button>
                 </div>
+
+                <IfComponent/>
             </header>
         </div>
     );