如何使用 Reactstrap 扩展导航栏

Question

我是 Reactstrap 的新手。我的导航栏切换器不起作用，我的导航栏正在扩展，我不知道为什么。我认为我理解它背后的逻辑，但我无法让它正常工作

//imports

import { * } from "reactstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

// 代码

<Navbar color="light" fixed="top" light>
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={function noRefCheck() {}} />
          <Collapse navbar>
            <Nav className="me-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">
                  GitHub
                </NavLink>
              </NavItem>
              <UncontrolledDropdown inNavbar nav>
                <DropdownToggle caret nav>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>Option 1</DropdownItem>
                  <DropdownItem>Option 2</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Reset</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
            <NavbarText>Simple Text</NavbarText>
          </Collapse>
        </Navbar>

Answer 1

由于您使用的是 Collapse 组件，因此它需要一个名为 isOpen 的 prop，并且需要在单击 时更新传递给 isOpen 的值>导航栏切换器。

//代码

//imports
import { * } from "reactstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

// Main Code
const functionName = () => {

  const [collapsed, setCollapsed] = useState(true);
  const toggleNavbar = () => setCollapsed(!collapsed);

  return(
    <Navbar color="light" fixed="top" light>
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={toggleNavbar} />
          <Collapse navbar isOpen={!collapsed}>
            <Nav className="me-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">
                  GitHub
                </NavLink>
              </NavItem>
              <UncontrolledDropdown inNavbar nav>
                <DropdownToggle caret nav>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>Option 1</DropdownItem>
                  <DropdownItem>Option 2</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Reset</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
            <NavbarText>Simple Text</NavbarText>
          </Collapse>
        </Navbar>
    );
}

在导航栏标记中使用 expand={"lg"} ，这样如果屏幕较大，它将完全展开，而对于较小的屏幕，它将折叠。

Answer 2

您不能使用 {*} 来调用 Reactstrap 组件。您需要调用代码中使用的每个组件。

这可能会帮助您解决

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavLink,
  NavItem,
  NavbarText
} from "reactstrap";

export default function Main() {
  return (
    <div>
      <Navbar color="light" fixed="top" light expand={true}>
        <NavbarBrand href="/">reactstrap</NavbarBrand>
        <NavbarToggler onClick={function noRefCheck() {}} />
        <Collapse navbar>
          <Nav className="me-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">
                GitHub
              </NavLink>
            </NavItem>
            <UncontrolledDropdown inNavbar nav>
              <DropdownToggle caret nav>
                Options
              </DropdownToggle>
              <DropdownMenu end>
                <DropdownItem>Option 1</DropdownItem>
                <DropdownItem>Option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>Reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText>Simple Text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

需要使用 expand={true} 或使用扩展中的任何人 sm,md, lg,xl, true, false 这些都是您可以调用的按要求出来。
对于 DropdownMenu，right 属性已被弃用，请改用 end。
欲了解更多详细信息，您可以访问reactstrap的文档页面。