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 Commented el 28 sept. 2019 a las 18:24

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.