Bootstrap：切换器不显示其内容

Question

我正在使用 React 构建一个基本网站，同时使用 Reactstrap（bootstrap 4 文档）。 当视口的宽度很小时，我有一个基本的导航栏，其中包含一些项目和一个切换按钮。 问题是当单击切换器时它不显示任何内容。为什么？ 但是，当屏幕以较大宽度返回时，服务选项卡的下拉菜单会显示为打开状态，因此似乎切换器以某种方式仅链接到它而不是整个导航栏。想法？

导航栏：

export default class MainNavBar extends React.Component {
  constructor(props) {
    super(props);

    this.scrolNav = this.scrolNav.bind(this);
    this.toggle = this.toggle.bind(this);
    this.state = {
      class_up: 'whentop',
      class_down: 'nav_top',
      dropdownOpen: false
    };
  }

// prova scroll adaptive navbar

componentDidMount() {
    window.addEventListener('scroll', this.scrolNav);
}


componentWillUnmount() {
    window.removeEventListener('scroll', this.scrolNav)
}


scrolNav() {
    const scrolly = window.scrollY;
    if (scrolly > 80) {
        this.setState({
          class_up: 'whenscroll',
          class_down: 'nav_down'
        })
    }   
    else if (scrolly < 80) {
        this.setState({
          class_up: 'whentop',
          class_down: 'nav_top'
        });

    }
}


  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }


  render() {
    return (
      <div  className={this.state.class_up}>
        <Navbar className={this.state.class_down} color="light" light expand="md">
        <a href="/"><img className="logonowrite" src={logoNoWrite} width="80px" alt=""/>
          <NavbarBrand id="write_logo"><img src={write} className="write_logo" alt=""/></NavbarBrand></a>
          <NavbarToggler onClick={this.toggle} />   
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
            <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle nav caret>
              Services
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem><Link to="/rec_services">Recruitment Solutions</Link></DropdownItem>
              <DropdownItem><Link to="/web_services">Web Design</Link></DropdownItem>
              <DropdownItem><Link to="/mark_services">SEO & Digital Marketing</Link></DropdownItem>
            </DropdownMenu>
          </Dropdown>                
              <NavItem>
              <Link className="int_link" to="/">Home</Link>
              </NavItem>
              <NavItem>
                <Link className="int_link_about" to="about">About</Link>
              </NavItem>
               <NavItem>
                <Link className="int_link_about" to="/contacts">Contacts</Link>    
               </NavItem> 
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

Answer 1

折叠组件<Collapse isOpen={this.state.isOpen} navbar> 正在搜索状态isOpen。当您单击 toggler 时，您设置的状态为 dropdownOpen 而不是 Collpase 正在搜索的 isOpen。

所以你需要改成<Collapse isOpen={this.state.dropdownOpen} navbar>

P.S 未测试