如何使用 Reactstrap 扩展 Navbar

Question

我是 Reactstrap 的新手。我的 Navbar Toggler 不工作，我的 Navbar 不扩展，我不知道为什么。我想我理解它背后的逻辑，但我无法让它正常工作

//进口

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

您不能使用 {*} 调用 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}或者使用expand中的任何一个sm,md,lg,xl,true,false这些都是你可以根据需要调用的. 对于 DropdownMenu，right 属性已被弃用，请改用 end。更多详细信息可以访问reactstrap的文档页面。

Answer 2

由于您正在使用 Collapse 组件，因此它需要一个名为 isOpen 的道具，并且需要在单击 NavbarToggler 时更新传递给 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>
    );
}

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

如何使用 Reactstrap 扩展 Navbar

How to expand Navbar with Reactstrap

html

css

reactjs

reactstrap