React - 使用来自 CDN 的外部 js

Question

抱歉，由于旧帖子被合并到一些与我的问题无关的帖子中，我再次提出这个问题......我是 React 的新手，并试图将 php 网站转换为 react 组件。但是，在旧网站中，纯 jquery 和 CDSNJS 中有一些功能。外部 javascripts 函数与我的组件没有很好地绑定，我不知道该怎么做。谁能给我一些建议。

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

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

案例 2：

除了上述情况，我还使用了 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 可能不再等于 $。

---

以下建议被告知不能解决问题。我会将它们保留在下面，以防有人发现它有用。

---

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

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

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

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

在其他情况下，在脚本标签中有defer、async等属性的情况下，阅读此cheat sheet即可了解执行顺序。

---

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

在你的入口模块中，在最顶部添加：

import 'some-jquery-plugin'