Soy un novato en React. Tengo una barra lateral de reacción que quiero cerrar/abrir al hacer clic:
export default function MaterialLayout(props) { const { children } = props; const classes = useStyle(); function CollapseSide() { document.getElementById('pro1').collapsed=!document.getElementById('pro1').collapsed; } return ( <ThemeProvider theme={theme}> <CssBaseline /> <Header /> <ProSidebar id='pro1' onClick={CollapseSide} collapsed={false}> .... ....Qué estoy haciendo mal
Con document.getElementById('pro1').collapsed , está configurando la propiedad en el nodo DOM real representado y no en el nodo React.
En su lugar, puede intentar lo siguiente
export default function MaterialLayout(props) { const { children } = props; const classes = useStyle(); const [ sideCollapsed, setSideCollapsed ] = useState(false); const toggleSideCollapsed = useCallback(() => { console.log('toggle') setSideCollapsed(collapsed => !collapsed) }, [ setSideCollapsed ]) // could leave this empty return ( <ThemeProvider theme={theme}> <CssBaseline /> <Header /> <ProSidebar onClick={toggleSideCollapsed} collapsed={sideCollapsed}> .... .... Sin embargo, no estoy seguro de si ProSidebar toma o no una propiedad onClick . Puede verificar eso usando la instrucción console.log y verificando su consola.
Para obtener más explicaciones, puede consultar los documentos de React en useState y useCallback o simplemente pregunte en los comentarios :)
¿Podría probar este código y decirme si funciona?
export default function MaterialLayout(props) { const { children } = props; const classes = useStyle(); const [toggled, setToggled] = useState(false); const [collapsed, setCollapsed] = useState(true); const handleToggle = () => { setToggled(!toggled); setCollapsed(!collapsed); } return ( <ThemeProvider theme={theme}> <CssBaseline /><Header /> <ProSidebar collapsed={collapsed} toggled={toggled} onToggle={handleToggle}> ...rest of content... ) }