javascript - 纯 Javascript mouseenter 和 mouseleave 事件委托(delegate)与 React 问题

Question

我想在我的 React 项目中实现类似的目标 ( https://creativesfeed.com/code/custom-cursors/index2.html )

我想要一个自定义鼠标光标(在本例中是一个点，位于“div”中)，它跟随鼠标的坐标，这很好，我可以让它工作。

我想要实现的另一件事是，当鼠标悬停在任何标签上时，自定义类将添加到自定义鼠标光标，并在自定义光标离开链接时删除。问题是，每当我将鼠标悬停在标签上时，该类就会立即出现并消失。我知道 Javascript 中的 eventListener 与 jQuery 不同，我什至尝试过使用 jQuery(我讨厌在 React 中使用它)，但我也遇到了同样的问题。那么我做错了什么？难道是因为我在 componentDidMount() 上运行了该函数？

import React, { Component } from 'react';
import Homepage from './components/Homepage';

class App extends Component {

  componentDidMount() {
    let mouse__follower = document.getElementById('mouse__follower');
    let links = document.getElementsByTagName('a');

    document.addEventListener("mousemove", (e) => {
      var x = e.clientX;
      var y = e.clientY;
      mouse__follower.style.top = `${y}px`;
      mouse__follower.style.left = `${x}px`;
    });

    let addClassToLink = (e) => {
      mouse__follower.classList.add('active');
    };

    let removeClassToLink = (e) => {
      mouse__follower.classList.remove('active');
    };

    // ALSO, IS THIS VERY BAD IN TERMS OF MEMORY CONSUMING?

    for(var i = 0, len = links.length; i < len; i++) {
      links[i].addEventListener('mouseenter', addClassToLink, false);
      links[i].addEventListener('mouseleave', removeClassToLink, false);
    };

  }

  render() {
    return (
      <div className="nu-creative">
        <div id="mouse__follower">
          <div id="mouse__follower__circle"></div>
        </div>
        <Homepage />
      </div>
    );
  }
}

export default App;

链接位于另一个文件中，但我认为这不是问题。

编辑:我发现了这个问题。如果我删除

mouse__follower.style.top = `${y}px`;
mouse__follower.style.left = `${x}px`;

从 document.addEventListener("mousemove", ...) 中，该类已正确添加和删除，因此我必须做一些事情。可能是因为两个 eventListener 一起触发。

我会调查，感谢到目前为止的回答:)

Answer 1

看起来 react 生命周期正在困扰你。问题是，每当 React 决定应该重新渲染 html 时，它就会重新渲染 html，并且在渲染方法中您将删除内联类。

因此，明智地执行此操作的方法是在组件的状态中设置一个标志，您可以使用 setState 更改该标志。 ，并在渲染方法中检查此标志来决定是否将该类添加到光标。

类似这样的:
<div id="mouse__follower" className={this.state.cursorActive? "active":""}>

编辑:
顺便说一句，这不相关，但是请记住取消绑定(bind)在 componentDidMount 中绑定(bind)的所有事件监听器。里面componentWillUnmount .