为什么 React Bootstrap Navbar 一直折叠？

IT技术 javascript reactjs bootstrap-4

2021-05-20 09:26:09

我按照 React-Bootstrap 文档，尤其是这段代码来制作我的导航栏 -> https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

但是，我从谷歌浏览器清除了我的应用程序会话，我的导航栏似乎保持折叠状态。

我在互联网上搜索没有成功，因为我不确定问题是什么以及它来自哪里？

有我<Navbar/>的代码

import React from 'react'
import { 
    Navbar as BoostrapNavBar,
    Nav,
    NavItem,
    MenuItem,
    NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class Navbar extends React.Component {

    render () {
        return (
            <BoostrapNavBar inverse collapseOnSelect>
                <BoostrapNavBar.Header>
                    <BoostrapNavBar.Brand>
                        <a href="/">{this.props.navbar_title}</a>
                    </BoostrapNavBar.Brand>
                    <BoostrapNavBar.Toggle />
                </BoostrapNavBar.Header>
                <BoostrapNavBar.Collapse>
                    <Nav pullRight>
                    <NavItem componentClass={Link} href="/collections" to="/collections">Collections</NavItem>
                        <NavItem componentClass={Link} href="/bracelets" to="/bracelets">Bracelets</NavItem>
                        <NavItem componentClass={Link} href="/glasses" to="/glasses">Lunettes</NavItem>
                        <NavItem componentClass={Link} href="/watches" to="/watches">Montres</NavItem>
                        <NavDropdown eventKey={3} title="Support" id="basic-nav-dropdown"> 
                            <MenuItem componentClass={Link} href="/support" to="/support">Messages</MenuItem> 
                            <MenuItem componentClass={Link} href="/new_message" to="/new_message">Contacter le Support</MenuItem> 
                        </NavDropdown>
                        <NavItem componentClass={Link} href="/login" to="/login"><img src={'../resources/images/user.png'} alt="User"/></NavItem>
                        <NavItem componentClass={Link} href="/shopping_bag" to="/shopping_bag"><img src={'../resources/images/shopping-bag.png'} alt="Shopping-Bag"/></NavItem>
                    </Nav> 
                </BoostrapNavBar.Collapse>
            </BoostrapNavBar>
        );
    }
}

欢迎任何帮助！

基于评论：

<div id="root">
    <div>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header"><a href="/" class="navbar-brand">ShopField</a><button type="button" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
                <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation" class=""><a href="/collections">Collections</a></li>
                    <li role="presentation" class=""><a href="/bracelets">Bracelets</a></li>
                    <li role="presentation" class=""><a href="/glasses">Lunettes</a></li>
                    <li role="presentation" class=""><a href="/watches">Montres</a></li>
                    <li class="dropdown">
                        <a id="basic-nav-dropdown" role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" href="#">Support <span class="caret"></span></a>
                        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
                            <li role="presentation" class=""><a href="/support" role="menuitem" tabindex="-1">Messages</a></li>
                            <li role="presentation" class=""><a href="/new_message" role="menuitem" tabindex="-1">Contacter le Support</a></li>
                        </ul>
                    </li>
                    <li role="presentation" class=""><a href="/login"><img src="../resources/images/user.png" alt="User"></a></li>
                    <li role="presentation" class=""><a href="/shopping_bag"><img src="../resources/images/shopping-bag.png" alt="Shopping-Bag"></a></li>
                </ul>
                </div>
            </div>
        </nav>
        <div>Home Page</div>
    </div>
</div>

3个回答

编辑：

目前，React Bootstrap 仅适用于 Bootstrap 3。

要解决您的问题，请按照我在此答案中概述的解决方案进行操作：

https://stackoverflow.com/a/48627104/8270343

一旦 React Bootstrap 与 Bootstrap 4 兼容，以下信息将变得相关：

它保持折叠状态，因为您navbar-expand-*的导航栏中没有该课程。该响应类告诉 Bootstrap 导航栏必须从哪个断点开始扩展。

因此，如果您希望它从lg断点开始扩展，即让它为大 ( lg) 和更大的屏幕扩展，那么您需要将该navbar-expand-lg类添加到您的导航栏。

这意味着：在您的情况下，您的react代码需要调整，以便此类包含在导航栏的 HTML 输出中。

您可以在此处找到有关该课程的更多信息：

https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

这是 Bootstrap 4 的工作示例。

先决条件：

npm install --save bootstrap@4.0.0
npm install --save reactstrap@next
npm install --save jquery@1.9.1
npm install --save react-transition-group
npm install --save react-popper
npm install react-router-bootstrap --save

确保你已经安装了 react-router-bootstrap。LinkContainer 是使链接可点击的组件。它必须放在 DropdownItem 之外才能在 Firefox 中工作。此外，将 className="collapse" 添加到 Collapse 组件将最初在 Firefox 中隐藏菜单。

import React, { Component } from 'react';
import logo from '../img/logo_header.png';
import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar, 
    NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';

class MyComponent extends Component{
    constructor(props) {
        super(props);

        this.toggleNavbar = this.toggleNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    toggleNavbar() {
        this.state.isOpen = App.myVar.isNavBarOpen; //fixes next time route change where isOpen=true
        let isOpen = !this.state.isOpen; //fixes initial delay in calling setState(), where clicking first time didn't open NavBar
        this.setState({
            isOpen: isOpen
        });
        App.myVar.isNavBarOpen = isOpen;
    }
    render(){
    return (
      <div>            
        <Navbar color="faded" light expand="md">
            <NavbarBrand href="/">
                <a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
                <a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
            </NavbarBrand>                
            <NavbarToggler onClick={this.toggleNavbar} />
            <Collapse isOpen={App.myVar.isNavBarOpen} navbar className="collapse">
              <Nav className="ml-auto" navbar>
                <NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Link 1
                  </DropdownToggle>
                  <DropdownMenu >
                    <LinkContainer to="/sub-link1">
                        <DropdownItem>Sub Link 1</DropdownItem>
                    </LinkContainer>
                  </DropdownMenu>
                </UncontrolledDropdown>                    
                <LinkContainer to="/logout">
                    <NavItem><NavLink>Logout</NavLink></NavItem>                                        
                </LinkContainer>
              </Nav>
            </Collapse>
        </Navbar>
      </div>
    )
    }
}

export default MyComponent;

有一个 bug，如果我们点击菜单链接，路由会改变，但 NavBar 菜单会保持打开状态，因此，我们需要在父组件中使用全局变量，例如。index.js 来管理它的打开状态。

应用程序.js

App.myVar = {
    isNavBarOpen: false
}

索引.js

history.listen((location, action) => {    
    App.myVar.isNavBarOpen = false; //use global variable to manage NavBar isOpen in nested component
});

此功能在 react-bootstrap 1.3.0 中运行良好。它有引导程序 4.5。

其它你可能感兴趣的问题

上一篇React Native 使用来自不同导出函数的助手 api 文件中的上下文下一篇对象数组排序不起作用