在React Bootstrap中实现导航栏折叠时切换菜单图标、点击汉堡图标转为X图标

你可以通过状态管理重写Navbar.Toggle的默认内容完成图标切换，完整实现步骤和代码如下：

实现逻辑 #

• 引入useState钩子维护导航栏的展开/折叠状态
• 给Navbar组件绑定expanded属性和onToggle状态更新回调
• 自定义Navbar.Toggle的子元素，根据当前状态渲染汉堡图标或X图标

完整修改后代码 #

import { useState } from 'react'
import { Navbar, Nav } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image' // 保持你原有依赖不变

const YourNavbarComponent = () => {
  // 定义导航栏展开状态
  const [navExpanded, setNavExpanded] = useState(false)

  return (
    <Navbar 
      collapseOnSelect 
      expand="lg"
      // 绑定状态和切换回调
      expanded={navExpanded}
      onToggle={() => setNavExpanded(!navExpanded)}
    >
      <Navbar.Brand className="mx-5" href="#home">
        <StaticImage 
          src="../images/logo.png"
          quality={95}
          formats={["AUTO", "WEBP", "AVIF"]}
        />
      </Navbar.Brand>
      {/* 自定义Toggle内容 */}
      <Navbar.Toggle aria-controls="responsive-navbar-nav">
        {navExpanded ? (
          // X图标，可直接修改样式适配你的主题
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        ) : (
          // 汉堡菜单图标
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        )}
      </Navbar.Toggle>
      <Navbar.Collapse id="responsive-navbar-nav" className="justify-content-around">
        <Nav className="mr-auto text-center nav-items">
          <Nav.Link className="pt-3 pt-md-1" href="#features">About</Nav.Link>
          <Nav.Link className="pt-3 pt-md-1"  href="#pricing">Skillset</Nav.Link>
          <Nav.Link className="pt-3 pt-md-1" href="#features">Our Brands</Nav.Link>
          <Nav.Link className="pt-3 pt-md-1" href="#pricing">Partners</Nav.Link>
          <Nav.Link className="pt-3 pt-md-1" href="#features">Careers</Nav.Link>
          <Nav.Link className="pt-3 pt-md-1" href="#pricing">Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default YourNavbarComponent

可选优化 #

如果你已经安装了react-bootstrap-icons图标库，可以直接替换svg代码，写法更简洁：

import { X, List } from 'react-bootstrap-icons'

// Toggle部分改写为
<Navbar.Toggle aria-controls="responsive-navbar-nav">
  {navExpanded ? <X size={24} /> : <List size={24} />}
</Navbar.Toggle>

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