Tengo un problema confuso en el que quiero actualizar una parte del estado del encabezado cuando llega a un tamaño de pantalla grande. Actualmente estoy usando Tailwind, así que tengo el siguiente código:
Cuando en la vista móvil, si la plantilla no está oculta y el tamaño de la pantalla es demasiado grande, el estado debería actualizarse automáticamente con handleHideTemplates...
Eso es lo que estoy tratando de hacer. Entiendo que con esto el mango se dispara inmediatamente lo cual no quiero...
en la vista móvil, si la persona presiona mostrar Plantillas, oculta las plantillas inmediatamente.
const handleHideTemplates = () => { dispatch(setShowTemplates({ hidden: 'hidden' })); dispatch(setTemplateMargin({ margin: '' })); }; console.log('hidden', hidden); return ( <header className={`text-gray-500 text-semibold text-s fill-accent1 top-0 z-30 sticky lg:grid ${ 'grid' ? handleHideTemplates() : null } bg-templateBg px-8 ${margin}`} >Lo descubrí ... en lugar de condicional dentro de la clase ...
useEffect(() => { const handleResize = () => { if (window.innerWidth >= 1024) { handleHideTemplates(); } }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []);