React函数式组件-⽗⼦组件之间的通信React函数式组件 - ⽗⼦组件之间的通信
⽗传⼦ --> 属性
⼦传⽗ --> 回调函数callback(属性传过去⼀个回调函数)
import React,{ useState }from'react'
const Navbar=(props)=>{
return(
<div>
Navbar-
{ ame }
{/* 点击Navbar中的按钮，控制Sidebar显⽰和隐藏 */} <button
onClick={()=>{
}}
>显⽰/隐藏</button>
</div>
)
}
const Sidebar=()=>{
return(
<div>
Sidebar
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
)
}
const Child=(props)=>{
return(
<div>
Child-
{ props.children }
</div>
)
}
export default function App(){
const[show, setshow]=useState(false)
return(
<div>
react组件之间通信<Navbar
myname="抽屉"
onEvent={()=>{
console.log('⽗组件中调⽤',show)
setshow(!show)
}}
/>
{
show ?
<Sidebar />:
null
}
<Child />
</div>
)
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。