如何在React Bootstrap切换导航栏中添加Hamburgers组件？

问题根源很明确：React Bootstrap的<Navbar.Toggle>本身就是一个<button>元素，而Hamburgers组件默认也会渲染出<button>，HTML不允许按钮嵌套，所以你的代码会失效。

这里给两种可行的解决方案：

方案一：用Hamburgers组件直接替代Navbar.Toggle #

自己管理Navbar的展开/折叠状态，完全弃用<Navbar.Toggle>，用Hamburgers组件触发状态切换。

示例代码：

import { useState } from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import Hamburger from 'hamburger-react'; // 以常用的npm包为例，根据你实际使用的组件调整

function CustomNavbar() {
  // 管理Navbar的展开状态
  const [navbarExpanded, setNavbarExpanded] = useState(false);

  return (
    <Navbar expanded={navbarExpanded} expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        
        {/* 用Hamburgers组件替代Navbar.Toggle */}
        <Hamburger 
          toggled={navbarExpanded}
          toggle={setNavbarExpanded}
          className="navbar-toggler" // 继承Bootstrap切换按钮的布局样式
        />

        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default CustomNavbar;

说明： #

• 通过useState维护navbarExpanded状态，将其传给<Navbar>的expanded属性，以此控制折叠面板的显示/隐藏。
• 如果你的Hamburgers组件不支持toggled和toggle属性（比如自定义的组件），可以手动绑定点击事件：onClick={() => setNavbarExpanded(!navbarExpanded)}，同时自己处理图标切换逻辑。
• 添加navbar-toggler类是为了让Hamburgers组件和原<Navbar.Toggle>保持一致的布局（比如右对齐、间距等）。

方案二：修改Hamburgers组件的根元素（仅适用于可自定义的组件） #

如果一定要保留<Navbar.Toggle>，需要让Hamburgers组件不渲染成<button>，而是用<span>或其他行内元素，避免按钮嵌套。

示例代码（假设你的Hamburgers组件支持自定义根元素）：

import { useState } from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import Hamburger from './your-custom-hamburger'; // 自定义的Hamburger组件

function CustomNavbar() {
  const [navbarExpanded, setNavbarExpanded] = useState(false);

  return (
    <Navbar expanded={navbarExpanded} expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        
        <Navbar.Toggle 
          onClick={() => setNavbarExpanded(!navbarExpanded)}
          aria-controls="basic-navbar-nav"
        >
          {/* 让Hamburgers渲染为span，避免按钮嵌套 */}
          <Hamburger as="span" isActive={navbarExpanded} />
        </Navbar.Toggle>

        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

说明： #

• 这种方式要求你的Hamburgers组件支持自定义根元素（比如通过as属性指定），如果是第三方组件，需要查看其文档确认是否支持。
• 点击事件绑定在<Navbar.Toggle>上，Hamburgers组件只负责渲染图标和状态切换的视觉效果。

推荐优先使用方案一，逻辑更清晰，也不需要依赖组件的自定义能力，避免不必要的限制。

内容的提问来源于stack exchange，提问作者Yaro