2

Estoy intentando implementar con react un comportamiento similar para un menú desplegable como el que proporciona slideToggle() de jQuery. Por ejemplo cuando se presiona el botón del menu:

introducir la descripción de la imagen aquí

Con jQuery es muy sencillo:

$(document).ready(function(){

    $('.menu-icon').on('click', function(){
        $('nav').slideToggle();
    })
})

Suponiendo que el código HTML es el siguiente:

<header>
  <div class="menu">
    <div class="contenedor">
      <p class="logo">Fitness Gym Home</p>
      <img src="imagenes/menu.png" class="menu-icon" alt="">
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Pricing</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Si quisiera replicar un comportamiento similar pero con el siguiente componente en react:

import React, { Component } from 'react';
import './header.css';

class Header extends Component {
    render() {
        return (
            <header>
                <div className='menu'>
                    <div className='contenedor'>
                        <p className='logo'>Fitness Gym Home</p>
                        <img 
                            src={require("../../assets/menu.png")} 
                            className="menu-icon" 
                        />
                        <nav>
                            <ul>
                                <li><a href="">Home</a></li>
                                <li><a href="">Pricing</a></li>
                                <li><a href="">About</a></li>
                                <li><a href="">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        );
    }
}

export default Header;

de que manera se puede lograr? He hecho algunas pruebas en las cuales según una propiedad del state del componente que cambia de true a false y viceversa al hacer click sobre el icono del menú asigna o quita una clase css que muestra o no el <nav>. Pero no logro el comportamiento del slide.

1 respuesta 1

1

Voy a tomar los conceptos de este post de @DanPrince en inglés para responder

El contexto de this en React no es el elemento es el Componente de React jQuery no interpreta como usarlo como selector

En tal sentido, se necesitará referenciar al elemento que deseas controlar con jQuery.

// JSX

class App extends React.Component {
  constructor(props) {
    super(props)
    this.element = 'menu-toggle'
    this.toggleButton = this.toggleButton.bind(this)
  }
  
  toggleButton() {
    $(this.refs[this.element]).slideToggle()
  }

  render() {
    return (
    
    <div>
        <button onClick={this.toggleButton}>Burger Button</button>
        <div ref={this.element}>
          <header>
                <br />
                <div className='menu'>
                    <div className='contenedor'>
                        <p className='logo'>Fitness Gym Home</p>
                        <img 
                            src="https://www.fillmurray.com/200/100"
                            className="menu-icon" 
                        />
                        <nav>
                            <ul>
                                <li><a href="">Home</a></li>
                                <li><a href="">Pricing</a></li>
                                <li><a href="">About</a></li>
                                <li><a href="">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
/** CSS */

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
  font-size:12px;
  list-style-type: none;
}
<!-- HTML -->

<body>
  <div id="app"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

El this.refs toma un callback, el cual se ejecutará cuando el componente este desplegado (mounted)

No obstante en la misma documentación de React señalada previamente, se sugiere en la medida de la posible evitar manipular el Dom directamente... como estas usando node hay varios paquetes por ahí que se pueden instalar para conseguir lo antes expuesto, es cuestión de probar y ver cual se ajusta más a tus necesidades.

1
  • Excelente, muchas gracias por tu respuesta.
    – Lucas
    Commented el 25 may. 2020 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.