React-子传父

1.概念

说明：React中子组件向父组件传递数据通常涉及回调函数和状态提升等方法。

2.代码实现

2.1绑定事件

说明：父组件绑定自定义事件

  <Son onGetSonMsg={getMsg}></Son>

2.2接受事件

说明：子组件接受父组件的自定义事件名称。按钮绑定点击事件触发父组件传递过来的数据。

function Son({onGetSonMsg}) {
const sonMsg='争做天下第一流'
  return <div>
    <div>Writer</div>
<button onClick={()=>onGetSonMsg(sonMsg)}>reply</button>
  </div>;
}

2.3接受参数

说明：msg被初始化为一个空字符串。然后定义了一个函数getMsg，这个函数接收一个参数msg，并使用setMsg函数将msg的值设置为传入的参数值。

function App() {
  const [msg,setMsg]=useState('')
  const getMsg=(msg)=> setMsg(msg);
  return (
    <div>
      <div>少年增许凌云志, {msg}</div>
      <Son onGetSonMsg={getMsg}></Son>
    </div>
  );
}

3.源代码

import { useState } from "react";

// 子传父
function Son({onGetSonMsg}) {
const sonMsg='争做天下第一流'
  return <div>
    <div>Writer</div>
<button onClick={()=>onGetSonMsg(sonMsg)}>reply</button>
  </div>;
}
function App() {
  const [msg,setMsg]=useState('')
  const getMsg=(msg)=> setMsg(msg);
  return (
    <div>
      <div>少年增许凌云志, {msg}</div>
      <Son onGetSonMsg={getMsg}></Son>
    </div>
  );
}

export default App;