React - 子组件向父组件通信

本质是利用回调函数进行子向父通信，子组件通过触发由父组件传递的 prop 函数，并传递数据，父组件执行该 prop 函数内的回调函数。

file:[父子通信]
function Son({ onGetMsg }) {
  // 1. 数据由子组件提供，向父组件传值
  const sonMsg = "this is son msg";

  return (
    <div>
      this is Son
      <!-- 2. onClick 触发 prop 函数，将值传递给它 -->
      <button onClick={() => onGetMsg(sonMsg)}>sendMsg</button>
    </div>
  );
}

function App() {
  // 3. 传递给子组件，触发时执行回调函数，msg 获取值
  const getSonMsg = (msg) => {
    console.log(msg);
  };

  return (
    <div>
      <Son onGetMsg={getSonMsg} />
    </div>
  );
}

export default App;