React-Scripts导入Bootstrap不起作用

Question

我使用React-Script，我的React组件中有一个按钮（Popover） 但它不起作用。我知道React-Bootstrap可用，但我不允许使用它：（

在React-Script文档中，他们说： https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap

但他们没有指出import bootstrap.js

我已经从npm

安装了jquery + bootstrap

这是我的Package.json：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "block-ui": "^2.70.1",
    "bootstrap": "^3.3.7",
    "express": "^4.15.3",
    "history": "^4.6.1",
    "jquery": "^3.2.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import createBrowserHistory from 'history/createBrowserHistory'
import UserProfile from './components/common/UserProfile';

import Routes from './routes';
import Navigator from './components/common/Navigator';

import 'bootstrap/dist/js/bootstrap.js';

// Global
global.config = require('./config');

// Navigator
ReactDOM.render(<Navigator />, document.getElementById('navigator'));

// Main
let browserHistory = createBrowserHistory()
ReactDOM.render(
    <Routes history={browserHistory} />,
    document.getElementById('main')
);
// Header
ReactDOM.render(<UserProfile />, document.getElementById('user_profile'));

registerServiceWorker();

这是我的React组件：

import React, { Component } from 'react';

import jQuery from 'jquery';
import 'bootstrap/dist/js/bootstrap.js';

class CommonComment extends Component {
  constructor(props) {
    super(props)

    this.state = {}
    this.handle =                   this.handle.bind(this);
  }

  handle(event) {
    jQuery("#QQQ").popover('show');
  }

  }
  render() {
    var this2 = this;
    return (
      <div>
          <button id="QQQ" onClick={this2.handle} type="button" className="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
      </div>
    )
  }
}

export {CommonComment};

当我点击该按钮时，显示：

  

类型错误：   __WEBPACK_IMPORTED_MODULE_1_jquery ___ default（...）（...）。popover不是函数

所以我认为没有正确包含Bootstrap。有人可以指出我做错的地方。

<小时/> 新！ 文档项目结构 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure

这是我的项目结构

非常感谢!!!