技术文献

组件通信：子传父

2026-03-21

核心：在子组件中调用父组件的函数并传递实参

//App.js

function Son({onGetSonMsb}){
  const sonMsb='this is son msg'
  return ( 
    <div>
       this is son
        <button onClick={()=>onGetSonMsb(sonMsg)}>sendMsg</button>
    </div>
  )
}

function App(){
  const getMsg=(msg)=>{
    console.log(msg)
   }
   
  return (
   <div>
     this is App
     <Son onGetSonMsg={getMsg} /> 
   </div>
  )
}

export default App

关于子组件参数解构（{onGetSonMsb}）的理解

➀父组件将一个函数传递给子组件

➁当父组件给子组件传递 onGetSonMsg={getMsg} 时，React 会把所有传递给子组件的属性打包成一个对象（这个对象就叫 props），传递给子组件函数。

举个直观的对比：

合辑