Instalé Reactstrap en un proyecto usando la instalación de NextJS TypeScript. Copié el ejemplo de la barra de navegación de los documentos de Reactstrap . La navegación se muestra bien, pero en dispositivos móviles, cuando hago clic en la barra de navegación, el menú de alternancia no se abre. De hecho, ningún componente de JavaScript de Reactstrap funcionó. También probé modales, tampoco funcionan.
Aparte de que JavaScript no funciona cuando se usan los componentes de Reactstrap, los estilos CSS de Reactstrap funcionan completamente bien.
Enlace a códigos de proyecto en vivo y caja para probar.
Código para la barra de navegación específicamente a continuación:
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;No sé por qué, pero su documentación en Storybook pone la function noRefCheck() como marcador de posición. Debe crear su propia función para activar el código Reactstrap como se describe en sus ejemplos de Github: https://github.com/reactstrap/reactstrap/blob/master/stories/examples/NavbarToggler.js
Primero, importa useState para que podamos usar el gancho. import { useState } from 'react';
En algún lugar antes del retorno, agregue un gancho como const [isOpen, setIsOpen] = useState(false);
A continuación, para NavbarToggle, agregue el enlace al evento <NavbarToggler onClick={() => { setIsOpen(!isOpen) }} />
Finalmente, asegúrese de que el Colapso tenga el estado correcto
<Collapse isOpen={isOpen} navbar> Navbar Contents </Collapse>