Javascript 将Colorbox添加到我的ReactJS应用程序会创建；未定义jQuery"；

我正在尝试将库添加到使用创建的项目中。我已经通过npm安装了

jquery colorbox

软件包，并在其中一个*.js文件中添加了导入：

import $ from 'jquery'; // also tried: import jQuery from 'jquery';
import 'jquery-colorbox';

在那之后，我得到的只是一个错误：

ReferenceError:未定义jQuery

有人对如何处理这个问题有什么建议吗

另外，我希望使用Colorbox库运行的代码如下：

$(function() {
    $('.colorbox-group' + id).colorbox({
        rel: 'colorbox-group' + id,
        maxWidth: '95%',
        maxHeight: '95%'
    });
});

更新#1

还有。。。尝试使用CDN并将以下行添加到

index.html

文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

并在我的应用程序的一个JS文件中运行代码：

$.colorbox（'something'）。
结果:

TypeError:\网页包\导入的\模块\ 1\ jquery \默认值。a.colorbox不是函数

看起来它使用的是变量jQuery，而不是$。我可能会尝试按名称导入jQuery对象，例如：

import {$, jQuery} from 'jquery';

或者只是：

import jQuery from 'jquery';

解决方案1：对jquery和jquery colorbox使用cdn

是一个简单的github存储库，我使用reactjs制作。希望有帮助

解决方案2：为jquery和jquery colorbox使用npm包

是一个使用npm包和react设置的github存储库。我还遇到了与“jQuery”未定义相同的问题。解决方案是在webpack配置中为jQuery添加一个webpack插件。将此添加到您的网页包配置文件中：
在顶部，首先导入网页包：

let webpack = require('webpack');

然后添加以下代码：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

解决方案3：专门针对“创建反应应用程序”

在app.js文件中更新导入，如下所示：

import jQuery from 'jquery';
window.jQuery = jQuery;
require('jquery-colorbox');

希望它能解决您的问题。
尝试过，就像我在问题中提到的那样。不起作用：（.你尝试过我的解决方案吗？这解决了你的问题吗？@Upasana我保证我会尽快检查：）。我一定会让你知道的。对不起，让你久等了。好的和简单的例子：）。但是你和我的应用程序之间的主要区别是，我使用的是create-react应用程序，我认为我无法轻松访问
webpack.config.js
文件。您的方法是创建React应用程序的更好方法吗（老实说，我在React方面没有经验，是从React创建应用程序包开始的这一冒险）？另外，复制了您的app.js文件，并且没有定义“jQuery”：。我认为它必须以某种方式导入到代码中。使用
导入后，从“jQuery”导入jQuery具有“colorbox不是函数”。我已经在index.html中添加了脚本。除非您在webpack配置文件中进行了更改，否则复制App.js文件将无法工作。不过，我正在研究CreateReact应用程序，请给我10分钟。@KrzysztofTrzos了解您的问题。请检查更新后的答案。您是否可以添加
colorbox
变量用法的示例？它仍然是“$（'.element'）.colorbox（{…}）；`吗？
import jQuery from 'jquery';
window.jQuery = jQuery;
require('jquery-colorbox');