React 中的 Bootstrap .modal()（没有第 3 方）-“不是函数”答案

【问题标题】：Bootstrap .modal() in React (no 3rd party) - 'is not a function'React 中的 Bootstrap .modal()（没有第 3 方）-“不是函数”
【发布时间】：2018-09-15 14:19:48
【问题描述】：

目标是能够通过 JavaScript 控制 Bootstrap Modal 元素，而无需使用 3rd 方库，例如反应引导。

应用程序是使用create-react-app 创建的。目标是不接触 webpack 配置文件。

package.json

{
  ...
  "dependencies": {
    "bootstrap": "^4.0.0",
    ...
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/bootstrap": "^4.0.1",
    ...
  },
  ...
}

index.tsx

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

现在尝试使用.modal('hide') 获取时：

jQuery 似乎只被导入一次（使用bootstrap npm 包）。所有其他功能和动画看起来都不错。

可能必须从引导程序 jQuery 中显式导入 Modal 模块？

编辑：更准确地说，$ 似乎根本就必须使用方法，并且只能像查询选择器一样工作。

【问题讨论】：

标签： javascript jquery reactjs bootstrap-4 bootstrap-modal

【解决方案1】：

您需要在 webpack.config 中声明“$”。

...
plugins: options.plugins.concat([

    new webpack.ProvidePlugin({

      $: 'jquery',

      jQuery: 'jquery',

      'window.jQuery': 'jquery',

      tether: 'tether',

      Tether: 'tether',

      'window.Tether': 'tether',

    })
})
...

还要确保 jQuery 作为依赖项存在于您的 package.json 中。

"dependencies": {
    ...
    "jquery": "^3.2.1",
    ...
},

我很确定您仍然需要将其添加到 webpack.config 中的条目中。

module.exports = {
    ...
    entry: {
        vendor: [
            ...
            'jquery',
            'bootstrap',
            ... 
        ],
        ...
    },
    ...
}

【讨论】：