React组件通信——子传父

子传父

在自组件中调用父组件中的函数并传递参数

import { useState } from "react";
// 定义自组件，接收父组件传递的方法
function Son({ onGetSonMsg }) {
  const sonMsg = "this is son msg";
  return (
    <div>
    // 绑定按钮点击事件，点击按钮时除法父组件方法，并传递参数
      this is Son<button onClick={() => onGetSonMsg(sonMsg)}>send Msg</button>
    </div>
  );
}
function App() {
  let [msg, setMsg] = useState("");
  // 父组件方法，接收参数
  const getMsg = (msg) => {
  // 改变msg的值
    setMsg(msg);
  };
  return (
    <div>
      this is Son msg {msg}
      // 在自组件上绑定属性å
      <Son onGetSonMsg={getMsg} />
    </div>
  );
}

运行结果：
传递前：

传递后：