使用react-popup库触发Scripts may close only the windows that were opened by them错误无法关闭弹窗怎么办

原有组件作用域内没有定义名为close的变量，运行时直接访问到浏览器全局挂载的window.close()方法，因此触发浏览器安全报错「Scripts may close only the windows that were opened by them」。本质是没有正确获取react-popup组件暴露的、专门用于关闭当前弹窗的方法。

• 方案1：通过Popup组件的render prop获取组件内置的关闭方法
  直接修改原有JSX，将弹窗内容的包裹层改成函数形式，接收组件传入的close参数，再绑定到关闭按钮的点击事件上即可，示例代码：

  <Popup trigger={<a href="javascript:void(0)">bobby</a>} modal>
    {(close) => (
      <button className="close" onClick={close}>
        &times;
      </button>
    )}
  </Popup>
  

  这个方法拿到的close是组件封装的、仅操作当前弹窗状态的方法，不会触发浏览器全局的窗口关闭逻辑，直接规避报错。

• 方案2：如果需要在弹窗作用域外控制关闭状态，使用组件暴露的useModal Hook获取对应弹窗的关闭方法
  示例代码：

  const DemoPopup = () => {
    // 传入对应弹窗的唯一id，获取该弹窗的操作方法
    const close = useModal('custom-demo-modal')
    return (
      <Popup
        modal
        trigger={<button type="button">bobby</button>}
      >
        <button className="close" onClick={close}>
          &times;
        </button>
      </Popup>
    )
  }
  

• 额外优化点：无需保留跳转逻辑的触发元素，建议将原来的<a href="javascript:void(0)">替换为原生<button type="button">，既避免a标签默认行为引发的报错，也更符合可访问性规范。

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