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

水深无声 2023-07-22 10:27 101阅读 0赞

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