单击时，折叠引导导航栏不会下拉

Question

当我的HTML页面调整为超过某个较小的浏览器宽度时，我使用bootstrap创建了一个可折叠的导航栏。在我将我的网站“转换”为React Web应用程序之前，它工作正常。导航栏仍然折叠为汉堡包按钮，但下拉菜单不再有效。我读了几篇帖子说我需要导入：

import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

但是，当我执行此操作时，页面根本不会加载到Chrome中，并且检查员会提供这些我不理解的错误。如果我评论这些导入语句，页面加载正常但导航栏不能如上所述工作。有人有什么想法吗？

我的JS文件代码：

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import LoadingDots from './LoadingDots';
import "../../../node_modules/jquery/dist/jquery.min.js";
import "../../../node_modules/bootstrap/dist/js/bootstrap.min.js";

const Header = ({loading}) => {

return (
<nav className="navbar navbar-inverse" id="my-navbar">
  <div className="container ">
    <div className="navbar-header">
      <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span className="icon-bar"></span>
        <span className="icon-bar"></span>
        <span className="icon-bar"></span>
      </button>
      <a href="#" className="navbar-left"><img className="img-responsive navLogo" alt="logo" src={require('../../images/colorMatchLogo75px.jpg')}></img></a>
    </div>
    <div className="collapse navbar-collapse" id="navbar-collapse">
      <ul className="nav navbar-nav">
        <li><Link to="/">Home</Link></li>
        <li><Link to="/adoptpet">Adopt A Pet</Link></li>
        <li><Link to="/findhome">Find A Home For Your Pet</Link></li>
        <li><Link to="/contactvet">Contact Veterinarian</Link></li>
      </ul>
      <ul className="nav navbar-nav navbar-right">
        <li><Link to="/login">Login/Register</Link></li>
      </ul>
    </div>
  </div>
</nav>    
);
};

Header.propTypes = {
  loading: PropTypes.bool.isRequired
};

export default Header;

Answer 1

尝试在您的webpack文件中添加此代码。这应解决您的Bootstrap Javascript错误。

new webpack.ProvidePlugin({
  $: "jquery",
  jquery: "jquery",
  "window.jQuery": "jquery",
  jQuery:"jquery"
})

现在使用npm install bootstrap-sass --save安装bootstrap-sass并将其导入./lib/main.js，如下所示。

import bootstrap from '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js'
import bootstrapmin from '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js'

现在在您的整个应用呈现的路线文件中，像这样导入./lib/main.js。

import React from 'react';
import {render} from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import javascript from './lib/main.js

render(
  <Router history={browserHistory}>
    <Route path='/dashboard' component={App}></Route>
  </Router>, document.getElementById('app')
)