从反应中的 ref 清除自定义事件

Question

我有一个自定义元素，它在反应中调度一个自定义事件。 由于没有办法简单的绑定事件，我需要手动创建一个eventListener并移除它。

我试过了：

export function App() {
  const textRef = useRef<DemoTextElement>(null);
  let eventRef;
  const logEvent = (e) => {
    console.log(e)
  }
  useEffect(() => {
    if(textRef.current) {
      eventRef = textRef.current;
      textRef.current.addEventListener('onCustomEvent', logEvent)
    }
    return () => {
      if(eventRef) {
          eventRef.removeEventListener('onCustomEvent', logEvent)
      }
    }
  }, [])

  return (
    <div className={styles.app}>
      <demo-text ref={textRef}/>
    </div>
  );
}

但我收到提示

从 React Hook useEffect 内部对 'eventRef' 变量的分配将在每次渲染后丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在 '.current' 属性中。否则，您可以直接在 useEffect 中移动此变量。

但我已经在使用 useRef 钩子了，所以我不知道如何解决这个问题...因为我无法在 useEffect 钩子中添加 useRef 钩子。

Answer 1

eventRef 变量将在每次渲染时重新声明。只需将其移动到useEffect 钩子中并进行赋值操作即可。

import React, { useEffect, useRef } from 'react';

export default function Test() {
  const textRef = useRef<HTMLDivElement>(null);
  const logEvent = (e) => {
    console.log(e);
  };
  useEffect(() => {
    const eventRef = textRef.current;
    if (eventRef) {
      eventRef.addEventListener('onCustomEvent', logEvent);
    }
    return () => {
      if (eventRef) {
        eventRef.removeEventListener('onCustomEvent', logEvent);
      }
    };
  }, []);

  return <div ref={textRef}>123</div>;
}