1

我正在使用 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();

这是我的反应组件：

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};

当我单击该按钮时，它显示：

TypeError: __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

这是我的项目结构

在此处输入图像描述

非常感谢！！！

4

0 回答 0