javascript - 使用 React : Uncaught TypeError: Cannot read property 'clientWidth' of null 自定义鼠标光标

Question

您好，我正在尝试在 React 中创建自定义光标。光标工作正常，但是在几秒钟后滚动或更改页面后，我收到以下错误:Uncaught TypeError: Cannot read property 'clientWidth' of null。

  //follows the cursor
  const customRef = React.useRef(null)
   
  React.useEffect(() => {
  document.addEventListener('mousemove', (e) => {
    const { clientX, clientY } = e
    const mouseX = clientX - customRef.current.clientWidth / 2
    const mouseY = clientY - customRef.current.clientHeight / 2
  customRef.current.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`
  })
  }, [])

  return (
    <div className="app-cursor" ref={customRef} />

  )
}

export default CustomCursor

这是 CSS:

.app-cursor {
  z-index: 100;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: 1px solid rgb(168, 163, 163);
  pointer-events: none;
  overflow: hidden; 
  transform: translate3d(0, 0, 0);
  position: fixed;
}

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

你得到错误的原因是因为你添加了事件监听器但从未删除它并且在你的应用程序的某个点，你卸载了你正在传递 ref 的元素，并且在尝试访问该 ref 时，它没有'存在。

您需要删除 cleanup effect of the useEffect 中的事件监听器.

const CustomCursor = () => {
    //follows the cursor
    const customRef = React.useRef(null)
   
    useEffect(() => {
      const onMouseMove = (e) => {
        const { clientX, clientY } = e
        const mouseX = clientX - customRef.current.clientWidth / 2
        const mouseY = clientY - customRef.current.clientHeight / 2
        customRef.current.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`
      }
      // add the event listener
      document.addEventListener('mousemove', onMouseMove)
      // cleanup function
      return () => {
        // remove the event listener when the component unmounts
        document.removeEventListener('mousemove', onMouseMove)
      }
    }, [])
  
    return (
      <div className="app-cursor" ref={customRef} />
    )
}