Reactstrap+Bootstrap 4 Beta导航下拉菜单失效问题求助

看起来你踩了reactstrap新手常见的坑——直接用原生Bootstrap的HTML结构和data-toggle属性，却忽略了reactstrap是基于React状态管理来实现组件交互的，和原生Bootstrap的jQuery驱动逻辑完全不兼容。

问题根源 #

你当前的代码用了原生Bootstrap的navbar-toggler和data-toggle/data-target属性，但在React + reactstrap的环境里，这些原生属性不会生效：

• Reactstrap不依赖jQuery，所以原生Bootstrap的JS插件根本不会被触发
• React的DOM更新机制会覆盖原生JS对DOM的修改，导致菜单状态无法正确同步

另外你提到的react-popper其实和当前的折叠菜单问题无关，它是reactstrap用来实现下拉菜单（Dropdown）这类需要精准定位的组件的依赖，完全不用在navbar折叠功能上。

正确实现方式 #

改用reactstrap提供的专用组件，通过React状态来控制菜单的展开/收起：

1. 首先导入需要的reactstrap组件：

import { Navbar, NavbarBrand, NavbarToggler, Collapse, Nav, NavItem, NavLink } from 'reactstrap';

2. 在你的App组件中添加状态和切换方法：

class App extends Component {
  state = {
    isOpen: false
  };

  toggle = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen
    }));
  };

  // ... 其他代码
}

3. 替换原有的navbar结构为reactstrap组件：

render() {
  return (
    <Navbar color="light" light expand="sm" className="mb-3">
      <div className="container">
        <NavbarBrand href="#">Navbar</NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="#">Home</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#">About</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#">Services</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#">Contact</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </div>
    </Navbar>
  );
}

关键说明 #

• NavbarToggler的onClick绑定我们定义的toggle方法，用来切换isOpen状态
• Collapse组件的isOpen属性直接绑定组件状态，React会自动根据状态更新DOM
• 所有导航元素都用reactstrap封装的组件（Nav、NavItem、NavLink），确保和React的生命周期兼容

这样修改后，你的导航折叠菜单就能正常工作了。如果之后需要实现下拉菜单（比如某个导航项展开子菜单），再去使用reactstrap的Dropdown系列组件，那时react-popper才会发挥作用。

内容的提问来源于stack exchange，提问作者D. Wall