useEffect为自己定义的事件创建事件处理程序

Question

所以我试图为应用程序的一部分抛出的特定事件创建一个事件处理程序钩子。

I figure like this

export const useMyEvent = () => {
const myEvent = useRef<SyntheticEvent | null>();
useEffect(
() => {
if (!window || !window.addEventListener || myEvent) return;
const eventListener = (event: SyntheticEvent) => myEvent.current(event);
window.addEventListener('myEvent', eventListener);
return () => {
window.removeEventListener('myEvent', eventListener);
};
},
[] // Re-run if eventName or element changes
);
}
export default useMyEvent;

然而，我得到一个错误& '类型的参数'& ';myEvent"'不能分配给'keyof windowventmap '类型的参数。">

我想我可能在这里犯了一个基本的概念错误，关于如何将事件连接到ref.

Answer 1

Ref是一个具有.current键的对象，它不是一个函数:

// Not myEvent.current(event)
myEvent.current = event

检查它的值是否为真是多余的，在挂载时，正如你定义的useEffect一样，ref将始终保持null值:

// if (myEvent) is always truthy, myEvent.current will always be the initial value on mount
if (!window || !window.addEventListener) return;