React Bootstrap调用Modal报confirm is not a function如何解决

Uncaught TypeError: confirm is not a function 是因为你混淆了不同组件库的API：React Bootstrap 提供的Modal组件本身没有confirm静态方法，Modal.confirm()是Ant Design组件库的Modal专属命令式调用方法，你从react-bootstrap的Modal里解构confirm拿到的是undefined，调用自然会报类型错误。

另外你的代码还存在两个隐藏问题：

• 自定义函数命名为delete，和JS原生的delete操作符重名，容易引发意料之外的解析问题
• confirm调用里用到的message变量没有提前声明/传参，后续就算解决了confirm的问题也会触发引用错误

你可以根据项目需求二选一：

方案1：用React Bootstrap原生能力实现确认弹窗（推荐，无额外依赖） #

自己维护弹窗显隐状态，抽离通用确认弹窗组件即可，参考实现：

import { useState } from 'react';
import { Button, Modal } from "react-bootstrap";
import { AiOutlineExclamationCircle } from "react-icons/ai";

// 可抽离到公共组件目录全局复用
function ConfirmModal({ visible, onCancel, onOk, title, content }) {
  return (
    <Modal show={visible} onHide={onCancel} centered>
      <Modal.Header closeButton>
        <Modal.Title>
          <AiOutlineExclamationCircle style={{ marginRight: 8, color: '#faad14' }} />
          {title}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>{content}</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onCancel}>取消</Button>
        <Button variant="danger" onClick={onOk}>确认</Button>
      </Modal.Footer>
    </Modal>
  )
}

// 业务代码中使用
export default function BusinessComponent() {
  const [confirmVisible, setConfirmVisible] = useState(false);

  const handleDelete = () => {
    // 此处编写实际删除逻辑
    console.log('执行删除操作');
    setConfirmVisible(false);
  };

  return (
    <>
      <Button variant="danger" onClick={() => setConfirmVisible(true)}>
        Delete
      </Button>
      <ConfirmModal
        visible={confirmVisible}
        onCancel={() => setConfirmVisible(false)}
        onOk={handleDelete}
        title="Do you Want to delete this message?"
        content="删除后数据无法恢复，请确认操作"
      />
    </>
  )
}

方案2：引入支持命令式调用的适配库 #

如果你不想手动维护弹窗的显隐状态，希望直接用confirm({...})的写法调用，可以引入专门适配React Bootstrap的命令式弹窗扩展包，不建议为了单个API引入整个Ant Design，会无端增加项目打包体积。

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