React函数式组件 – 父子组件之间的通信
父传子 --> 属性
子传父 --> 回调函数callback(属性传过去一个回调函数)
import React, { useState } from 'react'
const Navbar = (props) => {
return (
<div>
Navbar-
{ props.myname }
{/* 点击Navbar中的按钮，控制Sidebar显示和隐藏 */}
<button
onClick={() => {
props.onEvent()
}}
>显示/隐藏</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>
<Navbar
myname="抽屉"
onEvent={() => {
console.log('父组件中调用',show)
setshow(!show)
}}
/>
{
show ?
<Sidebar /> :
null
}
<Child />
</div>
)
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4569.html
