直接从文档中复制和粘贴时，引导导航栏折叠切换不起作用

Question

我正在复制并粘贴引导程序文档导航栏https://getbootstrap.com/docs/5.0/components/navbar/直接转化为反应成分：

export default function Navbar() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Link
</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}

导航栏在预览时正确显示，在正确单击时展开，但当我再次单击切换时，它不会折叠。当检查元素并点击时，我看到了这个变化：

<div class="collapse **collapsing**" id="navbarSupportedContent">

但我的页面上没有任何变化。我在本地安装了bootstrap 5.2，并且能够在我的页面上使用其他bootstrap功能。其他塌陷也可以。我错过了什么？

Answer 1

Bootstrap的某些功能依赖于它的JS。您是否导入了JS捆绑包(最好是在您的全局应用程序文件中(？如果没有，请这样做。如果有，请考虑使用针对react优化的ReactStrap。

https://reactstrap.github.io/

Answer 2

确保您已经导入了所有依赖项。有些组件需要JavaScript插件和Popper才能正常工作。

阅读更多相关信息：https://getbootstrap.com/docs/5.0/getting-started/introduction/

此外https://getbootstrap.com/docs/5.0/getting-started/introduction/#components对于需要这些插件的更具体的组件。