0

estoy migrando un pequeño proyecto a react. Es un HTML estático que presenta los archivos html, css y js. Tengo un problema al llamar las funcionalidades que tenía en mis js, no sé como importarlas o hacer referencias al elemento (porque se referenciaban con getElementById). Alguien tendrá una idea de como relacionarlo o incluirlos porque es la lógica de la página. Aquí les dejo una parte de mi proyecto:

mi archivo JS:

aparecer = function() {
    var soc = document.getElementById('social')
    soc.style.display = "block";
};
desaparecer = function() {
    var soc = document.getElementById('social')
    soc.style.display = "none";
};

El archivo ya en react al cual quiero agregarle dicha funcionalidad:

import React from "react";
import board from '../../img/menuLeft/board.png';
import puzzle from '../../img/menuLeft/puzzle.png';
import cat from '../../img/menuLeft/cat.png';

// style
import './MenuLeft.css'

function MenuLeft(){
    return(
        <>
        <div id="focussocial"
        //   className="socialfocus"
        //   onMouseOver="aparecer()" 
        //   onMouseOut="desaparecer()"
        ></div>
        <div id="social"
        //   className="social" 
        //   onMouseOut="desaparecer()" 
        //   onMouseOver="aparecer()"
          >
            <ul style={{paddingLeft: '0px'}}>
                <li>
                    <a href="/command/pizarra/?cod=<%= codigoClase %>" className="icon-facebook"><img src={board} width="40"/>
                        <p className="text-menu-left">PIZARRA</p>
                    </a>
                </li>
                <li>
                    <a href="/command/blockly/?cod=<%= codigoClase %>" className="icon-twitter" ><img src={puzzle} width="40" />
                        <p className="text-menu-left">BLOCKY</p>
                    </a>
                </li>
                <li>
                    <a href="#" className="icon-googleplus"><img src={cat} width="40" />
                        <p className="text-menu-left">SCRATCH</p>
                    </a>
                </li>
            </ul>
        </div>
    </> 
)
}

export default MenuLeft;

El código comentado eran las funciones como se hacían referencia cuando era solo html.

1 respuesta 1

1

Con react puedes simplemente usar el state para ese tipo de tareas, te dejaré un pequeño ejemplo:

import React, { useState } from 'react'

function MenuLeft() {
  const [ isVisible, setIsVisible ] = useState(false);

  return <>
    {/** Tu código **/}
    {
       isVisible && <div id="social">
         {/** Tu código **/}
       </div>
    }
  </>
}

Como puedes observar, hice algunas cosas importantes a tener en cuenta, te paso a explicar:

  • Importar el useState, porque esta función de React nos permite generar un variable de estado, y en dicha variable es donde vamos a definir si el botón debería mostrarse o no. Al llamar a useState nos devuelve un Array con 2 elementos, el primero es el valor que necesitamos y el segundo es una función para setear ese valor de forma reactiva. Para nuestro ejemplo como definimos useState(false) entonces isVisible tiene un valor igual a false, para volverlo true entonces debemos llamar a setIsVisible(true)

  • Otro elemento importante es la desestructuración de los objetos, esto básicamente es una forma de asignar variables en el ejemplo, es decir, si definimos una constante llamada array = ['foo', 'bar'] entonces al desestructurarlo podemos hacerlo así const [ var1, var2 ] = array y si luego verificamos sus valores vemos que console.log(var1) arroja foo. Eso tal cual hago con el useState

  • Como puedes observar envolví el div entre unos {} porque esta es la forma de ejecutar javascript dentro de .jsx.

  • Dentro del bloque donde puedo ejecutar javascript, evalúo si isVisible es verdadero. Cuando se utiliza la estructura && quiere decir que lo que siga después de esa estructura se evalúa, de lo contrario evalúa a null por lo que anteponer el isVisible && <div... a tu div hará que este solo se muestre cuando esté visible

Ya lo próximo a tener en cuenta es que para poder cambiar el valor de isVisible necesitas un elemento que accione, como no sé en tu caso cual es el elemento o la acción que hace que se muestre o no el div, entonces te pondré un ejemplo con un botón de cómo deberías setear el valor:

<button onClick={() => setIsVisible(!isVisible)}>Mostrar/Ocultar</button>

De esta forma cuando hagan click al botón (accionador) va a causar que se renderice de nuevo el componente y ahora isVisible será igual a true, y cada vez que lo presiones irá alternando su valor de true a false ya que siempre estamos seteando el valor inverso al colocar el !, lo que se conoce como un toggle.

Espero haberte ayudado, y cualquier pregunta comenta.

1
  • Si funciona amigo gracias! Pero tengo dos dudas aún, si es que tengo que agregar más funciones JS, ¿tendría que estar agregando en el state al componente e ir cambiando o modificando de la misma manera como me enseñaste? y lo otro es: ¿Como puedo referenciar un elemento para trabajar con él? Así como en js a través del getElementById para el DOM. ¿En React hay alguna manera?. Gracias de antemano :D el 28 sep. 2019 a las 18:24

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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