ReactStrap Navbar切换未在NextJS打字条项目中切换

Question

我已经安装了 reactstrap> reactstrap 在项目上使用NextJS上的项目打字稿安装。我已经从

除了使用ReactStrap组件时的JavaScript不起作用外，ReactStrap CSS样式还可以正常工作。

链接到实时项目codescodbox live project topport box live test。 /a>

代码的Navbar专门以下：

import Link from "next/link";
import {
  NavbarBrand,
  NavbarToggler,
  Collapse,
  NavItem,
  NavLink,
  Nav,
  Navbar,
} from "reactstrap";

import styles from "./Navigation.module.scss";

const Navigation = () => {
  return (
    <div className={styles.nav}>
      <Navbar expand="md">
        <NavbarBrand href="/">Premium Delivery</NavbarBrand>
        <NavbarToggler onClick={function noRefCheck() {}} />
        <Collapse navbar>
          <Nav className="ms-auto" navbar>
            <NavItem>
              <NavLink>
                <Link href="/">Home</Link>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink>
                <Link href="/services">Services</Link>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink>
                <Link href="/service-fees">Service Fees</Link>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink>
                <Link href="/about">About</Link>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink>
                <Link href="/contact">Contact</Link>
              </NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Navigation;

Answer 1

我不知道为什么，但是他们在故事书上的文档将函数norefcheck（）作为占位符。您本来可以创建自己的函数来激活ReactStrap代码，如其GitHub示例中所述：

首先，导入Usestate，以便我们可以使用钩子。
import {usestate}来自'react'';

在返回之前的某个地方，添加钩子
const [Isopen，stosopen] = usestate（false）;

接下来，对于navbartoggle，将钩子添加到事件中
＆lt; navbartoggler onClick = {（）=＆gt; {setIsopen（！isopen）}}} /＆gt; < /code>

最后，确保崩溃具有正确的状态

<Collapse isOpen={isOpen} navbar>
Navbar Contents
</Collapse>