Qwik JS子组件扩展回调QRL方法及Esc关闭模态框报错解决

错误原因 #

你遇到的Code(14)错误，是因为在原生键盘事件回调中直接解析并调用QRL时，脱离了Qwik的调用上下文（invocation context）。Qwik要求所有框架API（包括QRL执行）必须在其管理的上下文内运行，原生事件回调不属于这个范围，因此触发了报错。

修正后的代码 #

修改modal.tsx，通过Qwik的$()函数创建上下文内的回调，将QRL执行和额外逻辑包裹其中：

import { component$, QRL, Slot, useVisibleTask$, $ } from '@builder.io/qwik';

export type Props = {
  onClose: QRL<() => void>;
}

export default component$((props: Props) => {
  // 创建Qwik上下文内的回调，处理关闭逻辑
  const handleClose = $(async () => {
    // 执行父组件传入的关闭回调
    await props.onClose();
    // 这里添加额外的关闭逻辑，比如日志、内部状态清理等
    console.log('模态框关闭，执行自定义逻辑');
  });

  useVisibleTask$(() => {
    const onKeyUp = (e: KeyboardEvent) => {
      const key = e.key || e.code;
      if (key === 'Escape') {
        // 调用上下文内的回调，避免直接在原生事件中操作QRL
        handleClose();
      }
    };

    document.addEventListener('keyup', onKeyUp, true);

    return () => {
      document.removeEventListener('keyup', onKeyUp, true);
    };
  }, {
    strategy: 'document-ready',
  });

  return (
    <div class="modal-bg">
      <div class="modal">
        <Slot/>
      </div>
    </div>
  );
});

关键修改点 #

1. 用$()包裹核心逻辑：handleClose函数由$()创建，运行在Qwik的调用上下文内，确保QRL执行符合框架要求。
2. 原生事件仅做判断：keyup回调只负责检测Esc按键，实际的关闭逻辑交给handleClose处理，避免上下文越界。
3. 扩展额外逻辑：在handleClose中，除了执行props.onClose()，可以直接添加任何自定义逻辑（比如清理模态框内部状态、触发统计事件等）。

为什么原代码失效 #

原代码中props.onClose.resolve()和cb()直接在原生事件回调中执行，这个回调不在Qwik的上下文追踪范围内，框架无法保证响应式更新和API调用的合法性，因此抛出错误。

内容的提问来源于stack exchange，提问作者minitauros