核心原理:子组件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