React函数式组件 - 父子组件之间的通信

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>
  )
}