Question

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

导航栏：

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>

未测试PS

引导程序：切换器不显示其内容

1 个答案: