Material-UI组件转发Ref始终为Null问题求助

你的问题出在两个核心点：

• 直接把父组件传递的ref绑定给了Material-UI的<Drawer>组件，导致这个ref指向的是MUI Drawer的内部实例，而非你自定义组件的方法；同时你没有将自定义的toggleDrawer方法挂载到父组件的ref上。
• 类型定义不匹配：DrawerHandle里声明的是alterToggle方法，但父组件里调用的是toggleDrawer，类型和实际方法名不一致。

修正后的子组件代码 #

import React, { forwardRef, useState, useImperativeHandle } from 'react';
import { Drawer } from "@mui/material";

type Props = {
    open: boolean
};

// 调整类型定义，和要暴露的方法一致
export type DrawerHandle = {
    toggleDrawer: (open: boolean) => void
}

const NavigationDrawer = forwardRef<DrawerHandle, Props>((props, ref) => {
    const [isOpen, setIsOpen] = useState(props.open);
    // 单独创建ref指向MUI Drawer（如果不需要操作MUI Drawer实例，这步可以省略）
    const muiDrawerRef = React.useRef<HTMLDivElement>(null);

    const toggleDrawer = (open: boolean) => {
        setIsOpen(open);
    };

    // 使用useImperativeHandle将自定义方法挂载到父组件的ref上
    useImperativeHandle(ref, () => ({
        toggleDrawer
    }), []);

    // 处理关闭逻辑的内部方法
    const handleClose = (event: React.KeyboardEvent | React.MouseEvent) => {
        if (
            event.type === 'keydown' &&
            ((event as React.KeyboardEvent).key === 'Tab' ||
                (event as React.KeyboardEvent).key === 'Shift')
        ) {
            return;
        }
        setIsOpen(false);
    };

    return (
        <Drawer
            ref={muiDrawerRef} // 用内部ref绑定MUI Drawer，不占用父组件传递的ref
            anchor="left"
            open={isOpen}
            onClose={handleClose}
        >
            <p>Item1</p>
            <p>Item2</p>
        </Drawer>
    );
});

export default NavigationDrawer;

修正后的父组件代码 #

function ParentComponent() {
    const drawerRef = useRef<DrawerHandle>(null);
    
    const toggleDrawer = () => {
        // 现在可以正确调用子组件暴露的方法
        drawerRef.current?.toggleDrawer(true);
    };

    return (
        <>
            <AppBar position="sticky">
                <Button onClick={toggleDrawer}>打开抽屉</Button>     
            </AppBar>
            <NavigationDrawer open={false} ref={drawerRef}/>
        </>
    );
}

关键修改点说明 #

1. 使用useImperativeHandle：这个钩子专门用来定义通过forwardRef暴露给父组件的实例值，确保父组件的ref能拿到你自定义的方法，而不是底层组件的实例。
2. 分离内部ref和父组件ref：如果需要操作MUI Drawer的内部实例，单独创建一个内部ref绑定到MUI Drawer上，避免和父组件传递的ref冲突。
3. 统一类型定义：让DrawerHandle里的方法名和实际暴露的方法名一致，避免类型错误。

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