From 3ae520074a079ce49575abbd33c23f48c2ecbb7a Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Sat, 26 Oct 2024 15:20:53 +0800
Subject: [PATCH] =?UTF-8?q?7.=20=E7=88=B6=E5=AD=90=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BC=A0=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                      | 15 ++++++++--
 src/components/SonComponent.js  |  7 ++++-
 src/components/SonComponent2.js | 49 +++++++++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4fd1c40..ce28dd7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,10 @@
-import React from "react";
+import React, {useState} from "react";
 // import logo from './logo.svg';
 import './App.css';
 
 import InputComponent from "./components/InputComponent";
 import SonComponent from "./components/SonComponent";
+import SonComponent2 from "./components/SonComponent2";
 
 function App() {
     // vue3 组合式 API
@@ -29,7 +30,8 @@ function App() {
 
             this.state = {
                 a: 0,
-                arr: [0, 1, 2]
+                arr: [0, 1, 2],
+                msg: "parent msg"
             }
         }
 
@@ -159,6 +161,13 @@ function App() {
         }
     }
 
+    const [msg,setMsg] = useState("parent msg")
+
+    const changeMsg = (newMsg) => {
+        setMsg(newMsg)
+        return msg;
+    }
+
     return (
         <div className="App">
             <header className="App-header">
@@ -219,6 +228,8 @@ function App() {
                             SonComponent 插槽 slot1
                         </div>
                     </SonComponent>
+
+                    <SonComponent2 msg={msg} changeMsg={changeMsg}></SonComponent2>
                 </div>
             </header>
         </div>
diff --git a/src/components/SonComponent.js b/src/components/SonComponent.js
index 8681d1d..274f2f0 100644
--- a/src/components/SonComponent.js
+++ b/src/components/SonComponent.js
@@ -31,7 +31,12 @@ export default class SonComponent extends React.PureComponent {
                 </div>
 
                 <div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
-                    {this.props.scopeslot(<span>SonComponent 插槽 slot3 (作用域插槽) {this.state.msg}</span>)}
+                    {this.props.scopeslot(<div>
+                        <div>SonComponent 插槽 slot3 (作用域插槽)</div>
+                        <div>
+                            {this.state.msg}
+                        </div>
+                    </div>)}
                 </div>
             </div>
         </div>
diff --git a/src/components/SonComponent2.js b/src/components/SonComponent2.js
index e25b283..a27b5f8 100644
--- a/src/components/SonComponent2.js
+++ b/src/components/SonComponent2.js
@@ -1,13 +1,50 @@
-import React, {useState} from "react";
-export default function SonComponent2(props){
-    const [state] = useState({
-        msg: ""
+import React, {useEffect, useState} from "react";
+export default function SonComponent2(props= {
+    msg:"",
+    changeMsg:(_)=>{}
+}){
+    const [state, setState] = useState({
+        msg: "son msg",
+        tmp: "",
+        count: 0,
     })
 
+    function changeMsg(){
+        let target = `parent msg 被修改 (${++state.count})`
+        setState({
+            ...state,
+            tmp: props.changeMsg(target)
+        })
+    }
+
+    function revokeChangeMsg(){
+        setState({
+            ...state,
+            // count: state.count > 0 ? --state.count : 0,
+            tmp: props.changeMsg(state.tmp)
+        })
+    }
+
 
     return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}>
-        子组件
-        {state.msg}
+        子组件2
+
+        <div style={{border: '1px solid', width: '80%', overflow: 'auto', margin: 'auto'}}>
+            <div>
+                {state.msg}
+            </div>
+
+            <hr/>
+
+            <div>
+                {props.msg}
+
+                <div>
+                    <button onClick={changeMsg}>修改msg</button>
+                    <button onClick={revokeChangeMsg}>撤销操作</button>
+                </div>
+            </div>
+        </div>
     </div>
 
 }