react-bootstrap 5.3.3 offcanvas 的 offcanvas-backdrop 元素在单击 closeButton 时不会被删除

Question

我在单端应用程序中使用 v5.3.3 中的react-bootstrap。表单显示在从屏幕右侧飞入的画布中。

当通过单击背景本身关闭关闭画布时，它会按预期工作。但是，当通过单击 closeButon（offcanvas 右上角的 X）或以其他方式将 showOffcanvas-hook 设置为 false 来关闭 offcanvas 时，背景元素

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

不会从 DOM 中删除。看起来 onHide 回调无法关闭背景。

offcanvas的定义如下：

<Offcanvas className="orderinfo-offcanvas" show={showOffcanvas} placement='end' onHide={() => setShowOffcanvas(false)}>
  <Offcanvas.Header closeButton>
    <Offcanvas.Title><div className="display-6">Offcanvas title</div></Offcanvas.Title>
  </Offcanvas.Header>
    <Offcanvas.Body>Testcontent!</Offcanvas.Body>
</Offcanvas>

如果我在 Offcanvas 标签中设置属性

backdrop={false}

，背景应该不再可见。但就我而言，它仍然可见。

我搜索了此行为，但无法找到错误或只是修复它的想法。

有什么建议吗？谢谢！

Answer 1

当我意识到

fade offcanvas-backdrop show

元素在 DOM 中存在两次后，这个线程给了我解决问题的提示：

Bootstrap Offcanvas 会在网站的不同部分之间淡出复制吗？

我从 index.js 中删除了

import "bootstrap/dist/js/bootstrap.bundle.js";

，现在它按预期工作。 现在，我只是

import "bootstrap/dist/css/bootstrap.min.css";

和

import 'bootstrap-icons/font/bootstrap-icons.css';

以及我正在使用的

react-bootstrap

组件。