Custom Mouse Cursor using React: Uncaught TypeError: Cannot read property 'clientWidth' of null

Question

嗨，我正在尝试在 React 中创建自定义光标。光标工作正常，但是几秒钟后滚动或更改页面后，我收到以下错误：Uncaught TypeError: Cannot read 属性 '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} />
    )
}

Custom Mouse Cursor using React: Uncaught TypeError: Cannot read property 'clientWidth' of null

Custom Mouse Cursor using React: Uncaught TypeError: Cannot read property 'clientWidth' of null

javascript

mousemove

reactjs

react-hooks