Así que tengo este componente de la barra de navegación que incluye un componente de botón. Escribí un código que se supone que oculta el botón cuando la ventana alcanza los 960px, pero por alguna razón no funciona con la función que escribí. Pongo espacios entre el código para mostrar a qué líneas me refiero

      function Navbar() {
        const [button, setButton] = useState(true);

        const showButton = () => {
          if (window.innerWidth < 960) {
            setButton(false);
          } else {
            setButton(true);
          }
        };

        return (
          <>
            <nav className='navbar'>

              <div className='navbar-container' showButton={showButton}>
   
                <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                  <li className='nav-item'>
                    <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                      Home
                    </Link>
                  </li>
                </ul>
             
                {button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}

              </div>
            </nav>
          </>
        );
      }

Entonces, ahora mismo, si configuro el estado del botón en falso, desaparecerá.

 const [button, setButton] = useState(false);

Además, si reemplazo el nombre de mi función con onMouseEnter, desaparecerá, pero tendría que pasar el cursor sobre el botón

    const onMouseEnter = () => {
        if (window.innerWidth < 960) {
          setButton(false);
        } else {
          setButton(true);
        }
      };

  <div className='navbar-container' onMouseEnter={onMouseEnter}>

Entonces sé que mi estado se actualiza con mi lógica cuando cambio el tamaño de la pantalla a 960px porque la función onMouseEnter solo oculta el botón cuando paso el cursor sobre él a 960px

Pero no entiendo por qué el nombre de mi función original no oculta automáticamente el botón cuando cambio el tamaño de la pantalla a 960px.

¿Hay alguna función específica que deba nombrar en React para cambiar el tamaño de las pantallas?

-3
Brian 9 ago. 2020 a las 20:53

2 respuestas

La mejor respuesta

Lo primero es lo primero: // por qué no se activó su primera función: una función puede activarse de muchas formas, simplemente puede invocarla o puede invocarla en eventos como hacer clic, ingresar con el mouse, etc. pero no está invocando su función en ninguna parte.

Lo segundo: // ¿Cómo puede resolver ese problema? Para resolver este problema, debe escuchar el evento de cambio de tamaño. Puede agregar un detector de eventos de cambio de tamaño en la ventana o en el cuerpo.

window.addEventListener("resize", showButton);

// Aunque, hay muchas otras formas mejores de agregar un detector de eventos.

Tercero: Cómo verificar el tamaño de la pantalla en la primera carga: si está usando Hooks ::

  useEffect(() => {
       showButton();
  },[]);

Si está usando clase:

    componentDidMount(){
         showButton();
 }

Estos dos se activan después del primer renderizado.

0
devd 9 ago. 2020 a las 19:04

Simplemente podría evitar usar el estado y comparar directamente el ancho de la ventana:

{window.innerWidth > 960 && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
0
Joshlucpoll 9 ago. 2020 a las 18:01