Cześć, aktualnie uczę się Reacta i mam pewien problem ze zrozumieniem pewnej rzeczy. A dokładnie: Postanowiłem zrobić sobie skrypt który będzie chwytał wszystkie linki na stronie z klasą "hover-this" i potem po najechaniu na jeden z nich zaczął się lekko przesuwać ( przez transform: translate ) - ale to nie problem w samym skrypcie. Problem jest jak to "zamontować" w reactie. W czystym JS zrobiłem sobie <script></script> wrzuciłem cały kod w te tagi i śmigało - a jak to zrobić w reactie?
Na początku zrobiłem normalny komponent funkcyjny w którym dodałem cały kod, a w środku rendera (return) nic nie dałem puste miejsce (<> </>) - i wrzuciłem do głównego pliku App.js gdzie ładowane są wszystkie komponenty ale tam nawet nie łapie linków. Nie mogę sobie tego w głowie ułożyć na jakiej zasadzie mają działać takie odrębne skrypty które nic nie zwracają a coś robią w tle. Ktoś coś? Z góry dziękuję!
A tutaj kod tego skryptu w tym komponencie:
const LinksHover = (props) => {
const links = document.querySelectorAll(".hover-this");
const animateIt = function (e) {
const a = this.querySelector("span");
const { offsetX: x, offsetY: y } = e,
{ offsetWidth: width, offsetHeight: height } = this,
move = 25,
xMove = x / width * (move * 2) - move,
yMove = y / height * (move * 2) - move;
a.style.transform = `translate(${xMove}px, ${yMove}px)`;
if (e.type === "mouseleave") a.style.transform = '';
}
links.forEach(b => b.addEventListener('mousemove', animateIt));
links.forEach(b => b.addEventListener('mouseleave', animateIt));
return(
<>
</>
)
}
export default LinksHover;