导航栏-下拉切换菜单在使用reactjs的引导库中不起作用

j9per5c4 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(118)

我只是从 Bootstrap 库复制导航条形码，下拉菜单不工作，我的代码：

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Reports
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

新的React和引导。
Link to full file and project
这段代码是从库中直接复制导航栏，但仍然无法正常工作

reactjs

来源：https://stackoverflow.com/questions/74936849/navbar-dropdown-toggle-menu-not-working-in-bootstrap-lib-using-reactjs

1条答案

按热度按时间

brgchamk1#

可以通过以下方式实现React Bootstrap NavBar：

import React from "react";
import ReactDOM from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

const CustomNav = () => {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<CustomNav />);

现场演示点击此处：https://codesandbox.io/s/react-bootstrap-navbar-usbxgm
有关React Bootstrap组件的更多详细信息，请参阅以下内容：
https://react-bootstrap.github.io/components/navbar/
https://react-bootstrap.github.io/getting-started/introduction

赞(0）回复(0）举报 2022-12-29

我来回答

导航栏-下拉切换菜单在使用reactjs的引导库中不起作用

1条答案

相关问题

热门标签

最新问答