如何在Next Js中以编程方式关闭bootstrap 5 offcanvas

Question

我在NextJs应用程序中使用bootstrap 5进行安装，如下所示：npm install bootstrap，并通过_app.js将必要的文件导入到我的项目中，如下所示：

import 'bootstrap/dist/css/bootstrap.css'
...
useEffect(() => {
import("bootstrap/dist/js/bootstrap");
}, []);

现在的问题是，当我打开offcanvas模态并单击其中的链接时，offcanvas在页面更改后保持打开状态，而不是关闭。如何在路径名更改时并且仅在offcanvas处于活动状态时以编程方式关闭offcanvas。谢谢

注意：我没有使用react bootstrap

Answer 1

最近我遇到了同样的问题，但以下是我如何使事情正常工作的。

首先，我不认为你以正确的方式将bootstrap导入到你的nextjs应用程序中，但什么有效。然而，我认为你应该以这种方式将引导导入到你的nextjs应用程序中。

useEffect(() => {
typeof document !== undefined
? require("bootstrap/dist/js/bootstrap")
: null;
}, []);

我不想把它写得太长，所以让我们直接着手创建解决方案。首先，您必须创建一个自定义函数，以便在单击链接时关闭offCanvas。

const topicRef = useRef(null);
const closeOffCanvas = (event) => {
event.stopPropagation();
const bootstrap = require("bootstrap/dist/js/bootstrap");
var myOffcanvas = topicRef.current;
var bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);
bsOffcanvas.hide();
};

现在创建这样的链接并调用我们刚刚创建的函数

<Link href={`/article/18004/close-bootstrap-5-offcanvas-in-next-js`} passHref>
<a href="#" onClick={closeOffCanvas}>navigate to page then close offCanvas</a>
</Link>

我希望这能帮助你

Answer 2

以下是最终对我有效的方法：我导入的是单独的引导程序模块，而不是所有模块，当您这样做时，我注意到全局window.bootstrap对象没有设置。因此，我创建了一个utility/bootstrap.ts来正确初始化引导程序的子集：

import type {
Alert,
Button,
Carousel,
Collapse,
Dropdown,
Modal,
Offcanvas,
Popover,
ScrollSpy,
Tab,
Toast,
Tooltip,
} from 'bootstrap';
export async function initBootstrap(): Promise<void> {
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
const [buttonModule, carouselModule, dropdownModule, offcanvasModule] = await Promise.all([
!window.bootstrap?.Button ? import('bootstrap/js/dist/button') : undefined,
!window.bootstrap?.Carousel ? import('bootstrap/js/dist/carousel') : undefined,
!window.bootstrap?.Dropdown ? import('bootstrap/js/dist/dropdown') : undefined,
!window.bootstrap?.Offcanvas ? import('bootstrap/js/dist/offcanvas') : undefined,
]);
if (!window.bootstrap) {
window.bootstrap = {
Button: undefined as unknown as Button & typeof Button,
Carousel: undefined as unknown as Carousel & typeof Carousel,
Dropdown: undefined as unknown as Dropdown & typeof Dropdown,
Offcanvas: undefined as unknown as Offcanvas & typeof Offcanvas,
Alert: undefined as unknown as Alert & typeof Alert,
Collapse: undefined as unknown as Collapse & typeof Collapse,
Modal: undefined as unknown as Modal & typeof Modal,
Popover: undefined as unknown as Popover & typeof Popover,
ScrollSpy: undefined as unknown as ScrollSpy & typeof ScrollSpy,
Tab: undefined as unknown as Tab & typeof Tab,
Toast: undefined as unknown as Toast & typeof Toast,
Tooltip: undefined as unknown as Tooltip & typeof Tooltip,
};
}
if (buttonModule) {
window.bootstrap.Button ||= buttonModule.default;
}
if (carouselModule) {
window.bootstrap.Carousel ||= carouselModule.default;
}
if (dropdownModule) {
window.bootstrap.Dropdown ||= dropdownModule.default;
}
if (offcanvasModule) {
window.bootstrap.Offcanvas ||= offcanvasModule.default;
}
}
}

您需要安装@bootstrap/types才能使类型导入正常工作。然后，在我的组件中，就我的情况而言，它是Next Js的_app.tsx。我使用我的实用程序异步初始化引导程序

export default function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
initBootstrap();
}, []);
return (
<main>
<Header />
<Component {...pageProps} />
<Footer />
</main>
);

这允许引导程序正确地找到画布外的内容，而不是创建重复项。类似这样的东西：

export function Header() {
const offcanvasElRef = useRef<HTMLDivElement>(null);
const closeOffcanvas = () => {
const offcanvas = window?.bootstrap?.Offcanvas?.getInstance(offcanvasElRef.current as Element);
offcanvas?.hide();
};
return (
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" ref={offcanvasElRef}>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
);
}

Answer 3

导入如下：-

useEffect(() => {
import("bootstrap/dist/js/bootstrap.bundle");
}, []);