React - 使用来自 CDN 的外部 js

Question

抱歉，我又把它放了一遍，因为旧的 post 被合并到一些与我的问题无关的 post 中......我是 React 的新手，正在尝试转换一个php 网站变成 React 组件。然而，在旧网站中有一些纯 jquery 和来自 CDSNJS 的功能。外部 javascripts 函数不能很好地与我的组件绑定，我不知道如何绑定。请任何人给我一些建议。

案例一：我有一个这样的外部函数：

;(function ($) {
    /* Global variables */
    var prty, flickr;
    
    $.fn.flickrGallery = function(flickrID) {
        //Defaults settings  
        var opts = $.extend({}, {
            Key:prty.settings["Key"], 
            Secret:prty.settings["Secret"], 
            User:prty.settings["User"], 
            PhotoSet:flickrID, 
            Speed:400, 
            navigation:1,
            keyboard:1,numberEl:1 });  
         //Setup
         prty.Setup($(this), opts); 
    }; //End FN    
prty = { 
.... Internal code
};
})(jQuery);

这是我的组件代码：

async componentDidMount() {

    //$('#gallery').flickrGallery(2); // Not work

    //const el = ReactDOM.findDOMNode(this.display); Not work
    //$(el).vectorMap({map: 'world_mill_en'});
    //$(el).flickrGallery(2); 

    //const el = ReactDOM.findDOMNode(this.domRef); Not work
    //window.$('#addSupModal').modal('show')
    //$(el).flickrGallery(2);

    window.$(this.productIntro).flickrGallery(2); Not work

}

每次我运行，都会出现这样的错误：

Unhandled Rejection (TypeError): window.$(...).flickrGallery is not a function

案例二：

除了上述情况，我还使用了 CDNJS 的库

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

我已经尝试将这些链接包含到 index.html 中，但是当我运行时出现与上述相同的错误...请帮助

Answer 1

尝试通过 window.jQuery 而不是 window.$ 访问 flickrGallery 函数。

插件将flickrGallery功能添加到jQuery。在大多数情况下，jQuery 应该与 $ 相同。但是，在某些情况下，会加载 jQuery 的多个版本，并且 jQuery 可能不再等于 $。

被告知以下建议未能解决问题。我会把它们放在下面，以防有人觉得有用。

看起来你的反应组件脚本在执行外部脚本之前被执行和呈现。造成这种情况的原因有很多，其中一个原因是脚本标签的顺序。

在文档 head 中，确保您的脚本标签的顺序如下。

<script src="path/to/external/library.js"></script>
<script src="path/to/your/react/script.js"></script>

这些脚本标签没有defer和async属性，建议按顺序下载、解析和执行。先执行外部脚本。

其他情况下，有defer、async等属性的都在script标签里，看这个cheat sheet就能明白执行顺序了。

如果您正在使用将其功能添加到某个全局变量的插件，您的捆绑器可能会对其进行 tree-shaking 处理，因为它没有检测到任何对其导出的使用，并认为不需要该模块。在这种情况下，您必须添加副作用导入 (Doc).

在您的入口模块中，将此添加到最顶部：

import 'some-jquery-plugin'

React - 使用来自 CDN 的外部 js

React - Using external js from CDN

javascript

reactjs

cdn