技术文献

组件通信:子组件中的相互通信

2026-03-22

核心原理:子组件B上传至父组件,父组件在下发至组件B,父组件起到中转的作用
1.通过子传父 A→App
2.通过父传子 App→B  

✅在父组件中设置一个状态变量接收组件A传来的值,然后传递给组件B


//App.js

function A ({onGetAName}){
    const name='this is A name'
    return (
      <div>
         this is A compnent,
         <button onClick={()=>onGetAName(name)}>send</button>
      </div>
   )
}

function B({name})
 return (
   <div>
       this is B compnent,
       {name}
   </div>
 )
}

function App(){
 const [name,setName]=useState('')
 const getAName=(name)=>{
   console.log(name)
   setName(name)
 }
 return(
  <div>
     this is App
      <A onGetAName={getAName} />
      <B name={name} />
  </div>
 }
 
export default App