如何在 React JS 中使用脚本

Question

In my original work I had a <div class="cursor"></div> with this styling:

.cursor {
    pointer-events: none;
    position: fixed;
    padding: 0.7rem;
    background-color: #fff;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: transform 0.3s ease;
}

In the script section of my HTML file I have this javascript function for my cursor animation:

(function () {
    const link = document.querySelectorAll('nav > .hover-this');
    const cursor = document.querySelector('.cursor');
    const animateit = function (e) {
          const span = 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;
          span.style.transform = `translate(${xMove}px, ${yMove}px)`;
          if (e.type === 'mouseleave') span.style.transform = '';
    };
    const editCursor = e => {
          const { clientX: x, clientY: y } = e;
          cursor.style.left = x + 'px';
          cursor.style.top = y + 'px';
    };
    link.forEach(b => b.addEventListener('mousemove', animateit));
    link.forEach(b => b.addEventListener('mouseleave', animateit));
    window.addEventListener('mousemove', editCursor);
})();

How do I change this so it can work within React?

Answer 1

This is a very broad question but here are a few pointers to get you started...

Start with the React tutorial available from the react site itself at reactjs.org/tutorial/tutorial.html . It will cover the basics and also many 'react-y' programming patterns and best practices.

Once you've got that there are a huge number of tutorials available that go much more in depth. I would highly recommend Robin Wieruch's stuff: https://www.robinwieruch.de/ (he has also written a number of books on the subject)

Looking at your problem more closely. I would start by creating a component for the cursor and moving the bulk of the js to that. The problem is that without a good grounding in React (or at least the fundamentals) the question you're actually asking is 'How to program in React' rather than 'How do I do this particular thing in React' which would take a lot longer to write an answer to than most of us here on SO have time to do!