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
.