Javascript react引导导航栏折叠汉堡按钮不显示导航项目
我在react中有一个引导导航栏,当屏幕尺寸变小时,它会关闭导航栏并将其更改为汉堡包下拉列表,但当您单击它时,它不会显示导航项目 这是我的整个导航栏组件:Javascript react引导导航栏折叠汉堡按钮不显示导航项目,javascript,reactjs,twitter-bootstrap,navbar,hamburger-menu,Javascript,Reactjs,Twitter Bootstrap,Navbar,Hamburger Menu,我在react中有一个引导导航栏,当屏幕尺寸变小时,它会关闭导航栏并将其更改为汉堡包下拉列表,但当您单击它时,它不会显示导航项目 这是我的整个导航栏组件: import * as React from 'react'; import {NavLink, Link} from "react-router-dom"; import "bootstrap/dist/css/bootstrap.css" export default function Navbar(Props) { retu
import * as React from 'react';
import {NavLink, Link} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css"
export default function Navbar(Props) {
return (
<nav className="navbar navbar-dark bg-dark navbar-expand-sm" style={{marginTop: '-10px'}}>
<Link className="Navbar-brand nav-link text-light col-1 mr-4" to="/">
Logo
</Link>
<div className="row col-10 collapse navbar-collapse navbar-nav " id="navbarNav">
<NavLink className="nav-item nav-link text-light col-2 mr-4 mr-md-1" to="/customers">customers</NavLink>
<NavLink className="nav-item nav-link text-light col-2 mr-4 mr-md-1" to="/rentals">rentals</NavLink>
<NavLink className="nav-item nav-link text-light col-2 mr-4 mr-md-1" to="/movies">movies</NavLink>
</div>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"/>
</button>
<NavLink className="nav-item nav-link text-light col-1 mr-2 mr-md-0 ml-3" to="/login">login</NavLink>
</nav>
);
};
import*as React from'React';
从“react router dom”导入{NavLink,Link};
导入“bootstrap/dist/css/bootstrap.css”
导出默认功能导航栏(道具){
返回(
标志
客户
租金
电影
登录
);
};
您必须包含jquery和popper.js才能正确地计算下拉列表。
如果尚未安装,可以执行以下操作-
npm install jquery popper.js
现在,将它们包含在项目根目录的index.js文件或同一文件中。
如果您想在整个项目中使用它,那么我建议您将它们包含在index.js文件(src/index.js)中
谢谢你的回答,我做到了,现在我得到了一个eror,它在崩溃时被抛出。jqueryinterface:TypeError:无法将对象转换为原始值我已经编辑了我的帖子。请确认,这是进口订单,请按照。复制粘贴,如上所述。我确实更改了它,同样的eror再次出现,jquery和properjs显示为灰色,因此index.js不使用它们,这可能就是问题所在
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';