如何使用 React 触发关闭 Bootstrap 模式的函数？ （我没有使用 jQuery）

Question

我正在做一个 React 项目，由于某种原因，我选择使用 bootstrap 包而不是 react-bootstrap 包，现在我遇到了这个问题：

在 Bootstrap 模式中，有一个 Link 标签（来自 react-router-dom 包的组件），其行为类似于“a”标签，但不会重新加载页面。所以现在当我点击这个链接时，它会完成它的工作，但不幸的是模式会一直显示。

<Link to="/home">Home</Link>

我尝试向它添加 data-dismiss="modal" 属性并且它确实有效 - 它会在单击链接后关闭模式但它不会做它的真正工作，这是更改网址...

<Link to="/home" data-dismiss="modal">Home</Link>

我也尝试了这两个选项，它们产生了相同的行为：

这个：

<Link to="Home">
  Home
  <a data-dismiss="modal"></a>
</Link>

还有这个：

<a data-dismiss="modal">
  <Link to="/home">Home</Link>
</a>

我找到了使用 jQuery 的解决方案，但是在我的代码中使用 jQuery 来解决这个问题并不是一个好主意，尤其是因为我正在使用 React。 我也避免了我现在应该使用 react-bootstrap 包的现实，因为我将不得不在我的项目中更改很多代码。

Answer 1

以下屏幕截图来自 Bootstrap 的实际代码。特别是modal.js

如果你应该自己看，可以参考这里：https://github.com/twbs/bootstrap/blob/b083c9639fd9012e5cba57d6c4088d43b3c3e57d/js/src/modal.js

所以这里的重点是，您的项目可能正在使用 jQuery，因为

我尝试向它添加 data-dismiss="modal" 属性，它实际上 工作过

因此，如果您确实必须继续使用原始 Bootstrap，请继续使用 jQuery。下一个可能的解决方案是让您编写自己的脚本来关闭模式。

Bootstrap 依赖于模态的这些元素：

背景

<div class="modal-backdrop fade show"></div>

和模态元素

<div class="modal fade show" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" style="display: block; padding-right: 17px;" aria-modal="true" role="dialog">

您将不得不找到一种方法来 (1) 删除模态元素上的 show 类并更改其 CSS 显示属性，(2) 删除关闭时的模态背景元素。除非您应该将实现转换为基于 React 的组件（react-bootstrap 或 reactstrap 已经这样做了），否则您可能都必须直接在 DOM 中进行变异。