Tengo un componente de menú que quiero cerrar cuando hago clic en cualquier lugar de la página si está abierto.
¿Hay alguna manera de cerrar el menú sin la necesidad de agregar un detector de eventos al documento y verificar event.target ?
No hay forma de enviar la función de cierre de vuelta al componente principal, ya que vive en una Route separada.
Navbar -> MenuComponent RouteView -> MainContentSí. Esto se logra fácilmente envolviendo el componente en ClickAwayListener proporcionado por material ui. Luego pasa una función al atributo onClickAway y eso debería cerrar su menú por usted. He proporcionado una plantilla a continuación y también puede consultar los documentos de MUI:
import ClickAwayListener from '@mui/material/ClickAwayListener'; export default function MenuComponent() { const [open, setOpen] = useState(false); const handleClick = () => { setOpen(!open); }; const handleClickAway = () => { setOpen(false); }; return ( <ClickAwayListener onClickAway={handleClickAway}> <Box> <button type="button" onClick={handleClick}> Open menu dropdown </button> {open ? ( <Box> Click me, I will stay visible until you click outside. </Box> ) : null} </Box> </ClickAwayListener> ); }