ReferenceError：NextJS 项目中未定义 CustomEvent

Question

我收到错误： ReferenceError: CustomEvent is not defined 。 我知道 CustomEvent 仅在浏览器中可用（客户端），但我正在尝试使用此 function 作为事件：

const mouseEnterHandler =  () => {
  eventDispatcher('cursor', {
    label: 'test',
  })
}

onMouseEnter={mouseEnterHandler()}

export const eventCreator = (name: string, params: Record<string, any>): CustomEvent => {
  const event = new CustomEvent(name, {
    detail: params
  })

  return event
}

export const eventDispatcher = (name: string, params: Record<string, any>): CustomEvent => {
  const event: CustomEvent = eventCreator(name, params)

  document.dispatchEvent(event)

  return event
}

Answer 1

把它放在一个useEffect挂钩中，它就会起作用。

Answer 2

export default function SomePage({ props }) {
  useEffect(() => {
    window.addEventListener('test-event', (event) => {
      console.log('test-event', event);
    });

    window.dispatchEvent(new CustomEvent('test-event', { detail: { test: 'testing' } }));
  });

}