Import external js from react components (Global function & CDNJS)

Question

I'm new to React and trying to convert a php website into react components. However, in old website there are some function in pure jquery and from CDSNJS. The external javascripts function are not binding well with my component and I cannot figure out how to. Please can anyone give me some advice.

Case 1: I got a an external function like this:

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

And this is my component's code:

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

}

Every time I run, an error like this appears:

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

Case 2:

Beside the case above, I'm also using a lib from 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>

I have tried including these links into index.html but when nothing happens when I run ... Please help

Import external js from react components (Global function & CDNJS)

0 Answers0