反応を使用してブートストラップからのドロップダウンを表示する方法

Question

my React.js projectにtwitterブートストラップナビバーがあり、this codepenのようなドロップダウンを表示したいと思います。ただし、現在、Navbar内のドロップダウンをクリックすると、ドロップダウンメニューが表示されません。

Main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; //Note: when this line is commented out the navbar does not display ??? 
import { render } from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes'; 
import './styles/styles.css'; //Webpack can import CSS files too. 
// Note: the below import was causing a syntax error. 
// import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import { Link } from 'react-router' 

render(
    <Router history={browserHistory} routes={routes} />, 
    document.getElementById('app') 
); 

App.js

// This component handles the App template used on every page. 
import React, {PropTypes} from 'react'; 
import Header from './common/Header'; 
import NavBar from './common/navbar'; 
import Router from 'react-router'; 

var navbar = {}; 
navbar.brand = {linkTo: "#", text: "chrisrjones.com"}; 
navbar.links = [ 
    {linkTo: "#", text: "About Me"}, 
    {linkTo: "#", text: "Contact"}, 
    {dropdown: true, text: "Contribute", links: [ 
     {linkTo: "#", text: "Dropdown Link 1"}, 
     {linkTo: "#", text: "Dropdown Link 2", active: true} 
    ]} 
]; 

class App extends React.Component { 
    render() { 
     return (
      <div className="container-fluid"> 
       <NavBar {...navbar}/> 
       <Header/> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    children: PropTypes.object.isRequired 
}; 

export default App; 

navbar.js

import React, {PropTypes} from 'react'; 
import { Link, IndexLink } from 'react-router'; 
import { browserHistory, Router, Route } from 'react-router' 
var ReactDOM = require('react-dom'); 
// import React, { PropTypes } from 'react'; 

// create classes 
var NavBar = React.createClass({ 
    render: function(){ 
    return(
     <nav className="navbar navbar-inverse navbar-static-top"> 
     <div className="container-fluid"> 
      <div className="navbar-header"> 
      <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
       <span className="sr-only">Toggle navigation</span> 
       <span className="icon-bar"></span> 
       <span className="icon-bar"></span> 
       <span className="icon-bar"></span> 
      </button> 
      <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /> 
      </div> 
      <div className="collapse navbar-collapse" id="navbar-collapse"> 
      <NavMenu links={this.props.links} /> 
      </div> 
     </div> 
     </nav> 
    ); 
    } 
}); 

var NavBrand = React.createClass({ 
    render: function(){ 
    return (
     <a className="navbar-brand" href={this.props.linkTo}>{this.props.text}</a> 
    ); 
    } 
}); 

var NavMenu = React.createClass({ 
    render: function(){ 
    var links = this.props.links.map(function(link){ 
     if(link.dropdown) { 
     return (
      <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} /> 
     ); 
     } 
     else { 
     return (
      <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> 
     ); 
     } 
    }); 
    return (
     <ul className="nav navbar-nav"> 
     {links} 
     </ul> 
    ); 
    } 
}); 

var NavLinkDropdown = React.createClass({ 
    render: function(){ 
    var active = false; 
    var links = this.props.links.map(function(link){ 
     if(link.active){ 
     active = true; 
     } 
     return (
     <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> 
    ); 
    }); 
    return (
     <li className={"dropdown " + (active ? "active" : "")}> 
     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      {this.props.text} 
      <span className="caret"></span> 
     </a> 
     <ul className="dropdown-menu"> 
      {links} 
     </ul> 
     </li> 
    ); 
    } 
}); 

var NavLink = React.createClass({ 
    render: function(){ 
    return(
     <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text}</a></li> 
    ); 
    } 
}); 

// set data 
// var navbar = {}; 
// navbar.brand = 
// {linkTo: "#", text: "React Bootstrap Navbar"}; 
// navbar.links = [ 
// {linkTo: "#", text: "Link 1"}, 
// {linkTo: "#", text: "Link 2"}, 
// {dropdown: true, text: "Dropdown", links: [ 
//  {linkTo: "#", text: "Dropdown Link 1"}, 
//  {linkTo: "#", text: "Dropdown Link 2", active: true} 
// ]} 
// ]; 

// render NavBar 
// ReactDOM.render(
// // <NavBar {...navbar} />, 
// <NavBar/> 
// document.getElementById("navbar") 
//); 

module.exports = NavBar; 

package.jsonあなたは自分のプロジェクトに/負荷jQueryとブートストラップのJavaScriptファイル（複数可）を追加する必要が

{ 
    "name": "crj-frontend", 
    "version": "1.0.0", 
    "description": "This repo will hopefully be the frontend for the new chrisrjones.com website.", 
    "main": "index.js", 
    "scripts": { 
    "start": "babel-node server.js", 
    "compile": "webpack", 
    "test": "mocha --reporter progress testSetup.js \"src/**/*.test.js\"" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "bootstrap": "^3.3.7", 
    "jquery": "^3.1.1", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.2", 
    "react-router": "^3.0.2", 
    "react-router-redux": "^4.0.8", 
    "redux": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-0": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "expect": "^1.20.2", 
    "express": "^4.14.1", 
    "jsdom": "^9.10.0", 
    "mocha": "^3.2.0", 
    "open": "0.0.5", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-middleware": "^1.10.0", 
    "webpack-hot-middleware": "^2.16.1", 
    "webpack-node-externals": "^1.5.4", 
    "whatwg-fetch": "^2.0.2" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/ipatch/crj-frontend" 
    } 
} 

Answer 1

。

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

あなたのプラグインのごwebpack.config.dev.js内側に：これについて移動する一つの方法は、追加することです。

はその後main.jsにインポート：

import 'jquery'; 
import 'bootstrap/dist/js/bootstrap'; 

webpack.config.js

// webpack.config.js 
const webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    target: 'web', 
    context: path.join(__dirname, 'src'), 
    entry: [ 
     'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 
     './main', 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.js', 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new webpack.ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery' 
     }) 
    ], 
    module: { 
     rules: [{ 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react', 'stage-0'], 
       }, 
      }, 
      { 
       test: /\.css$/, 
       use: ['style-loader', 'css-loader'], 
      } 
     ] 
    }, 
    devtool: 'source-map', 
}; 

main.js

// main.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { render } from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes'; 
import './styles/styles.css'; 
import { Link } from 'react-router'; 
import 'jquery'; 
import 'bootstrap/dist/js/bootstrap'; 

render(
    <Router history={browserHistory} routes={routes} />, 
    document.getElementById('app') 
); 

*追記：ちょうどFYIとして、あなたのCSS fまたは#appに悪影響を提供されたイメージに示す小さなビューポートにあなたのナビゲーションバーに影響を与えることができ、それに適用されるmin-width: 550px;があります

#app { 
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #4d4d4d; 
    min-width: 550px; 
    max-width: 850px; 
    margin: 0 auto; 
} 

ナビゲーションバーのトグルが原因分幅が設定されることにオフスクリーンれます。

あなたが代わりにメディアクエリを使用することができます最小幅を削除することができない場合。

@media (min-width: 768px) { 
    #app { 
    min-width: 550px; 
    } 
}