forwarded ref of material-ui component is always null

Question

我目前正在制作一个导航栏，其中包含一个来自material-ui库的抽屉元素。

我想将<Drawer>组件转发到父导航栏，其中应该让我调用NavDrawer分量的toggleDrawer函数。我使用了react库中的forwardRef函数，但我的反对者总是null。

父组件

function ParentComponent() {
const drawerRef = useRef<DrawerHandle>(null);

const toggleDrawer = () => {
//  drawerRef.current is null >:(
drawerRef.current?.toggleDrawer(true)
};
return (
<>
<AppBar position={"sticky"}>
<Button onClick={toggleDrawer} />     
</AppBar>
<NavigationDrawer open={false} ref={drawerRef}/>
</>
);
}

和转发抽屉组件

import React, {forwardRef, useState} from 'react';
import {Drawer} from "@mui/material";
type Props = {
open: boolean
};
export type DrawerHandle = {
alterToggle: () => void
}
const NavigationDrawer = forwardRef<DrawerHandle, Props>((props, ref) => {
const [isOpen, setIsOpen] = useState(props.open)
const toggleDrawer =
(open: boolean) =>
(event: React.KeyboardEvent | React.MouseEvent) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Tab' ||
(event as React.KeyboardEvent).key === 'Shift')
) {
return;
}
setIsOpen(open)
};
return (
<Drawer
ref={ref}
anchor={"left"}
open={isOpen}
onClose={toggleDrawer(false)}
>
<p>Item1</p>
<p>Item2</p>
</Drawer>
);
})

我不能把我的头绕在这里的问题，也许它的类型相关，但比ref对象应该是一个错误类型的对象，而不是null。

Answer 1

您不必将ref传递给Drawer，因为您不需要访问它的属性。您只需要imperativeHandle将处理程序返回给父进程。

// in NavDrawer
useImperativeHandle(ref,
() => ({
toggleDrawer,
}),
[]);

则ParentComponent中的ref.current对象将包含toggleDrawer方法。