如何给Navbar组件传递Props以实现导航栏关闭控制

核心逻辑是把父组件中控制导航栏显示状态的更新函数作为prop传递给子组件Navbar，子组件接收后绑定到内部关闭按钮的点击事件即可，具体实现如下：

1. 父组件AppLayout.js 代码实现 #

import { useState } from 'react'
import Navbar from './Navbar'

function AppLayout() {
  // 父组件内部管理导航栏显示状态
  const [showNav, setShowNav] = useState(false)

  return (
    <div className="app-layout">
      {/* 状态为false时显示打开导航栏的按钮 */}
      {!showNav && (
        <button onClick={() => setShowNav(true)}>打开导航栏</button>
      )}
      {/* 自定义prop传递状态更新函数给子组件，语义化命名为onClose */}
      {showNav && <Navbar onClose={() => setShowNav(false)} />}
    </div>
  )
}

export default AppLayout

2. 子组件Navbar.js 代码实现 #

// 子组件接收父组件传递的onClose prop
function Navbar({ onClose }) {
  return (
    <div className="navbar">
      <p>导航栏内容区域</p>
      {/* 关闭按钮直接绑定接收的onClose方法 */}
      <button onClick={onClose}>关闭导航栏</button>
    </div>
  )
}

export default Navbar

可选优化 #

如果存在组件层级较深、或者需要避免不必要的重复渲染场景，可以用useCallback包裹传递给子组件的方法：

// AppLayout.js 中修改逻辑
import { useState, useCallback } from 'react'
//...
const handleCloseNav = useCallback(() => setShowNav(false), [])
// 传递时替换为包装后的方法
{showNav && <Navbar onClose={handleCloseNav} />}

内容的提问来源于stack exchange，提问作者LK10