如何在React+ChakraUI中通过导航栏按钮打开导航抽屉？

核心思路是状态提升：将useDisclosure的状态和方法从NavigationDrawer移到父组件Navigation中，再通过props传递给需要的子组件，让NavigationBar可以直接调用打开抽屉的方法。

1. 修改父组件 Navigation.jsx #

把useDisclosure放在这里统一管理，将状态和方法传递给两个子组件：

// src/components/navigation/Navigation.jsx
import NavigationDrawer from './NavigationDrawer';
import NavigationBar from './NavigationBar';
import { useDisclosure } from '@chakra-ui/react';

function Navigation() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <>
            <NavigationDrawer isOpen={isOpen} onClose={onClose} />
            <NavigationBar onOpenDrawer={onOpen} />
        </>
    )
}
export default Navigation

2. 修改 NavigationDrawer.jsx #

移除自身的useDisclosure逻辑，改用父组件传递的props：

import {
    Drawer,
    DrawerOverlay,
    DrawerContent,
    DrawerCloseButton,
} from '@chakra-ui/react'
import { React } from 'react'

function NavigationDrawer({ isOpen, onClose }) {
    return (
        <Drawer placement='left' onClose={onClose} isOpen={isOpen}>
            <DrawerContent>
                <DrawerCloseButton aria-label='Close navigation drawer'></DrawerCloseButton>
                {/* 可在此添加抽屉内的导航内容 */}
            </DrawerContent>
        </Drawer>
    )
}
export default NavigationDrawer;

注：移除了原抽屉组件内的汉堡按钮，统一使用导航栏中的按钮触发抽屉

3. 修改 NavigationBar.jsx #

接收父组件传递的onOpenDrawer方法，绑定到汉堡按钮的点击事件：

// src/components/navigation/NavigationBar.jsx
import { IconButton, useColorMode,  Flex } from '@chakra-ui/react'
import { MoonIcon, SunIcon, HamburgerIcon } from '@chakra-ui/icons'

function NavigationBar({ onOpenDrawer }) {
    const { colorMode, toggleColorMode } = useColorMode()

    return (
        <Flex
            as="nav"
            align="center"
            justify="space-between"
            wrap="wrap"
            w="100%"
            mb={8}
            p={8}
            bg={"black"}
        >
            <IconButton 
                icon={<HamburgerIcon />} 
                aria-label='Open navigation drawer' 
                variant='solid'
                onClick={onOpenDrawer}
            />
            <IconButton 
                aria-label='Toggle theme' 
                onClick={toggleColorMode} 
                icon={colorMode === 'light' ? <SunIcon /> : <MoonIcon />} 
            />
        </Flex>
    )
}
export default NavigationBar

修改完成后，点击NavigationBar中的汉堡按钮即可触发抽屉的打开逻辑，实现跨组件的状态控制。

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