Estoy tratando de responder a mi diseño. Mi lógica es cuando se mostrará el estilo div: "bloquear", mostrará una cesta y cuando el usuario navegue en el dispositivo móvil, la pantalla div no será ninguna y el usuario deberá hacer clic en el botón para abrir la cesta.
Ahora el problema es que mi estado predeterminado es verdadero, por eso cuando un usuario móvil visita el sitio web, primero verá una cesta que no quiero. Quiero que cuando el usuario visite por primera vez, no vea la cesta que necesita para hacer clic en el botón. No puedo establecer el estado predeterminado en falso porque el usuario de escritorio no puede ver la cesta.
// MY STATE const [toggle, setToggle] = useState(true); <button onClick={() => setToggle(!toggle)}>Open</button> <div className="box_order mobile_fixed" style={{ display: `${toggle ? "block" : "none"}` }} > // BASKET CODE </div>Podría usar window.matchMedia para establecer el valor inicial del estado.
El método matchMedia() de la interfaz de Windows devuelve un nuevo objeto MediaQueryList que luego se puede usar para determinar si el documento coincide con la cadena de consulta de medios, así como para monitorear el documento para detectar cuándo coincide (o deja de coincidir) con esa consulta de medios.
Por ejemplo:
const [toggle, setToggle] = useState(window.matchMedia("max-width: 768px").matches);Establezca el estado predeterminado en falso y use la devolución de llamada useState
// MY STATE const [toggle, setToggle] = useState(window.innerWidth > 700); <button onClick={() => setToggle(toggleBefore => !toggleBefore)}>Open</button> <div className="box_order mobile_fixed" style={{ display: toggle ? "block" : "none" }} > // BASKET CODE </div>Puede establecer el valor predeterminado de alternar según el tamaño de la pantalla con la API de consultas de medios. Y escuche el cambio de tamaño de pantalla que necesita.
Eche un vistazo a esta respuesta: sintaxis de consulta de medios para Reactjs