在 React 应用程序中使用 jQuery 关闭 Bootstrap 模态答案

【问题标题】：Close Bootstrap modal using jQuery in React application在 React 应用程序中使用 jQuery 关闭 Bootstrap 模态
【发布时间】：2021-11-10 13:05:39
【问题描述】：

我正在尝试在 React 中使用 Bootstrap 模式。我已经成功打开了一个模态。为了以编程方式关闭模式，我使用下面的代码。

$('#exampleModal').modal('hide')

代码是在按钮的 onClick 事件中编写的。当我点击按钮时，我收到错误Unhandled Rejection (TypeError): jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).modal is not a function

我已经导入了 Bootstrap 和 jQuery，如下所示。

import 'bootstrap';
import $ from 'jquery';

如何解决这个问题？如何在 React 中使用 jQuery 来关闭模态框？

【问题讨论】：

【解决方案1】：

使用react-bootstrap 并在使用 React 时尽量避免使用 JQuery。因为 JQuery 与 React 内部的水平有点不同，如果我可以这样说的话。

在这个例子中，你可以看到如何在组件状态中处理它到show modal： https://react-bootstrap.github.io/components/modal/#modals-live

【讨论】：