Bootstrap: Toggler не отображает свое содержимое

Question

Я создаю базовый веб-сайт с помощью React, используя также Reactstrap (документация по начальной загрузке 4).У меня есть базовый Navbar с некоторыми элементами и кнопка переключения, когда ширина области просмотра мала.Проблема в том, что при нажатии на переключатель он ничего не отображает.Зачем?Однако, когда экран возвращается на большую ширину, раскрывающееся меню вкладки служб выглядит открытым, поэтому кажется, что переключатель каким-то образом связан только с ним, а не со всей панелью навигации.Идеи?

Навбар:

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, а не isOpen, которое ищет Collpase.

Итак, вам нужно изменить на <Collapse isOpen={this.state.dropdownOpen} navbar>

PS не тестировался