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;