如何在React.js中加载本地JavaScript文件？

Question

I have animated svg that is to be embedded in React file.The svg is displayed properly but animation doesn't occur, because the required js file is unable to load

Following are the required js files needed for svg animation

1. dxicons.js

var _0xfee4=["\x69\x6D\x61\x67\x65\x73\x2F","\x6C\x6F\x61\x64","\x6C\x65\x6E\x67\x74\x68","\x63\x6F\x6E\x74\x61\x69\x6E\x73","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x73\x76\x67","\x61\x70\x70\x65\x6E\x64","\x65\x61\x63\x68","\x2E\x77\x65\x61\x74\x68\x65\x72\x69\x63\x6F\x6E","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x74\x74\x72","\x70\x6C\x61\x79","\x6E\x6F\x64\x65","\x23","\x73\x65\x6C\x65\x63\x74","\x73\x74\x79\x6C\x65","\x73\x74\x6F\x70","\x63\x6C\x69\x63\x6B","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x63\x75\x72\x73\x6F\x72","\x70\x6F\x69\x6E\x74\x65\x72","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x35\x30\x25\x20\x35\x30\x25","\x65\x61\x73\x65\x4F\x75\x74","\x74\x6F","\x72\x65\x73\x74\x61\x72\x74","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x76\x69\x73\x69\x62\x6C\x65","\x77\x61\x79\x70\x6F\x69\x6E\x74\x2D","","\x72\x65\x70\x6C\x61\x63\x65","\x6B\x65\x79","\x39\x30\x25","\x70\x61\x75\x73\x65","\x68\x69\x64\x64\x65\x6E"];var imagesPath=_0xfee4[0];var delayBetweenIcons=0.1;var useRollover=true;var hoverScale=1.05;var speed=1;var playOnStart=true;var iconLinks=[];var tls=[];var tlsIdle=[];var tlsRollover=[];var tlsReverse=[];var tlsActive=[];var iconNames=[];var iconStyles=[];var thisIcons=[];var allIconsF=[];window[_0xfee4[9]](_0xfee4[1],function(){$(_0xfee4[8])[_0xfee4[7]](function(_0x4ac6x11,_0x4ac6x12){var _0x4ac6x13=Snap(_0x4ac6x12);for(var _0x4ac6x14=0;_0x4ac6x14<iconNames[_0xfee4[2]];_0x4ac6x14++){tlsActive[_0x4ac6x14]=false;if(_0x4ac6x12[_0xfee4[4]][_0xfee4[3]](iconNames[_0x4ac6x14])){var _0x4ac6x15=iconNames[_0x4ac6x14];Snap[_0xfee4[1]](imagesPath+_0x4ac6x15+_0xfee4[5],function(_0x4ac6x16){var _0x4ac6x17=_0x4ac6x13[_0xfee4[6]](_0x4ac6x16);determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x17,_0x4ac6x12);});};};})});function makeVisible(_0x4ac6x17,_0x4ac6x19){_0x4ac6x17[_0xfee4[10]]({visibility:_0x4ac6x19})}var currentWaypoints=0;function playWhenVisible(_0x4ac6x1c){currentWaypoints++;setTimeout(function(){tls[_0x4ac6x1c][_0xfee4[11]]();currentWaypoints=0;},delayBetweenIcons*1000*currentWaypoints);}function determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x16,_0x4ac6x12){allIconsF[_0x4ac6x11]=_0x4ac6x16;setTimeout(function(){var _0x4ac6x1e=_0x4ac6x16[_0xfee4[14]](_0xfee4[13]+_0x4ac6x15)[_0xfee4[12]];thisIcons[_0x4ac6x11]=_0x4ac6x1e;iconStyles[_0x4ac6x11]=_0x4ac6x1e[_0xfee4[15]];window[_0x4ac6x15](_0x4ac6x11,_0x4ac6x16,_0x4ac6x1e);tls[_0x4ac6x11][_0xfee4[16]]();tlsRollover[_0x4ac6x11][_0xfee4[16]]();if(useRollover&&iconLinks[_0x4ac6x11]){_0x4ac6x1e[_0xfee4[9]](_0xfee4[17],function(){if(tlsActive[_0x4ac6x11]){window[_0xfee4[19]][_0xfee4[18]]=iconLinks[_0x4ac6x11]}});iconStyles[_0x4ac6x11][_0xfee4[20]]=_0xfee4[21];_0x4ac6x1e[_0xfee4[9]](_0xfee4[22],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:hoverScale,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});_0x4ac6x1e[_0xfee4[9]](_0xfee4[27],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:1,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});};setTimeout(function(){makeVisible(_0x4ac6x16,_0xfee4[28])},30);var _0x4ac6x1f= new Waypoint({element:_0x4ac6x12,handler:function(_0x4ac6x20){var _0x4ac6x21=parseInt(this[_0xfee4[32]][_0xfee4[31]](_0xfee4[29],_0xfee4[30]));playWhenVisible(_0x4ac6x21);},offset:_0xfee4[33]});},delayBetweenIcons*1000*_0x4ac6x11);}function animationComplete(_0x4ac6x11,_0x4ac6x23){tlsActive[_0x4ac6x11]=_0x4ac6x23;if(_0x4ac6x23){if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[11]]()}}else {if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[34]]()}};}function restartIcons(_0x4ac6x25){for(var _0x4ac6x26=0;_0x4ac6x26<_0x4ac6x25[_0xfee4[2]];_0x4ac6x26++){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x26]],_0xfee4[35]);resetLines(_0x4ac6x25[_0x4ac6x26]);};(function _0x4ac6x27(_0x4ac6x14){setTimeout(function(){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]],_0xfee4[28]);tls[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]][_0xfee4[26]]();if(--_0x4ac6x14){_0x4ac6x27(_0x4ac6x14)};},delayBetweenIcons*1000)})(_0x4ac6x25[_0xfee4[2]]);}

2. dxweathericons.js

var socialMediaIconNames = [
    "clearNightIcon"
];

//var socialMediaIconNames = ["chrome"];
iconNames = iconNames.concat(socialMediaIconNames);
var easeVar = Quad;
var linesToReset = [];

//animate each of the icons
window['clearNightIcon'] = function(index, f, thisIcon)
{
    var tl = new TimelineLite({onStart:animationComplete, onStartParams:[index, true], onReverseComplete:animationComplete, onReverseCompleteParams:[index, false]})
        .from(f.select("#moon").node, 1, {scale:0,transformOrigin:"50% 50%", ease:Elastic.easeOut})
        .timeScale(speed);

    animateStars(f, 6, tl, .4);



    tls[index] = tl;
    var tlRollover = new TimelineLite();
    tlsRollover[index] = tlRollover;
}

function animateStars(f, starCount, thisTl, startingTime)
{
    var timeBetween = .2;
    for (var i = 1; i < starCount + 1; i++) {
        thisTl.from(f.select("#star" + i).node, 1.5, {alpha:0, repeatDelay:1, repeat:-1, ease:Linear.easeNone, yoyo:true}, startingTime + timeBetween * i)
    };

}

More two files are required, but, those are too big to paste. These shown files has animation. Any suggestions higly appreciable. Thanks in advance

Answer 1

If you wish to somehow keep the variables inside the files in your React file scope, that is not possible unless the js file explicitly export the objects.

There is however a way to import the files so that they execute immediately but you won't have access to the files' objects.

Simply write

import './(path-to-file)'

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Answer 2

export the object you need to use

dxicons.js

export const _0xfee4=["\\x69\\x6D\\x61\\x67\\x65\\x73\\x2F","\\x6C\\x6F\\x61\\x64","\\x6C\\x65\\x6E\\x67\\x74\\x68","\\x63\\x6F\\x6E\\x74\\x61\\x69\\x6E\\x73","\\x63\\x6C\\x61\\x73\\x73\\x4C\\x69\\x73\\x74","\\x2E\\x73\\x76\\x67","\\x61\\x70\\x70\\x65\\x6E\\x64","\\x65\\x61\\x63\\x68","\\x2E\\x77\\x65\\x61\\x74\\x68\\x65\\x72\\x69\\x63\\x6F\\x6E","\\x61\\x64\\x64\\x45\\x76\\x65\\x6E\\x74\\x4C\\x69\\x73\\x74\\x65\\x6E\\x65\\x72","\\x61\\x74\\x74\\x72","\\x70\\x6C\\x61\\x79","\\x6E\\x6F\\x64\\x65","\\x23","\\x73\\x65\\x6C\\x65\\x63\\x74","\\x73\\x74\\x79\\x6C\\x65","\\x73\\x74\\x6F\\x70","\\x63\\x6C\\x69\\x63\\x6B","\\x68\\x72\\x65\\x66","\\x6C\\x6F\\x63\\x61\\x74\\x69\\x6F\\x6E","\\x63\\x75\\x72\\x73\\x6F\\x72","\\x70\\x6F\\x69\\x6E\\x74\\x65\\x72","\\x6D\\x6F\\x75\\x73\\x65\\x65\\x6E\\x74\\x65\\x72","\\x35\\x30\\x25\\x20\\x35\\x30\\x25","\\x65\\x61\\x73\\x65\\x4F\\x75\\x74","\\x74\\x6F","\\x72\\x65\\x73\\x74\\x61\\x72\\x74","\\x6D\\x6F\\x75\\x73\\x65\\x6C\\x65\\x61\\x76\\x65","\\x76\\x69\\x73\\x69\\x62\\x6C\\x65","\\x77\\x61\\x79\\x70\\x6F\\x69\\x6E\\x74\\x2D","","\\x72\\x65\\x70\\x6C\\x61\\x63\\x65","\\x6B\\x65\\x79","\\x39\\x30\\x25","\\x70\\x61\\x75\\x73\\x65","\\x68\\x69\\x64\\x64\\x65\\x6E"];var imagesPath=_0xfee4[0];var delayBetweenIcons=0.1;var useRollover=true;var hoverScale=1.05;var speed=1;var playOnStart=true;var iconLinks=[];var tls=[];var tlsIdle=[];var tlsRollover=[];var tlsReverse=[];var tlsActive=[];var iconNames=[];var iconStyles=[];var thisIcons=[];var allIconsF=[];window[_0xfee4[9]](_0xfee4[1],function(){$(_0xfee4[8])[_0xfee4[7]](function(_0x4ac6x11,_0x4ac6x12){var _0x4ac6x13=Snap(_0x4ac6x12);for(var _0x4ac6x14=0;_0x4ac6x14<iconNames[_0xfee4[2]];_0x4ac6x14++){tlsActive[_0x4ac6x14]=false;if(_0x4ac6x12[_0xfee4[4]][_0xfee4[3]](iconNames[_0x4ac6x14])){var _0x4ac6x15=iconNames[_0x4ac6x14];Snap[_0xfee4[1]](imagesPath+_0x4ac6x15+_0xfee4[5],function(_0x4ac6x16){var _0x4ac6x17=_0x4ac6x13[_0xfee4[6]](_0x4ac6x16);determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x17,_0x4ac6x12);});};};})});function makeVisible(_0x4ac6x17,_0x4ac6x19){_0x4ac6x17[_0xfee4[10]]({visibility:_0x4ac6x19})}var currentWaypoints=0;function playWhenVisible(_0x4ac6x1c){currentWaypoints++;setTimeout(function(){tls[_0x4ac6x1c][_0xfee4[11]]();currentWaypoints=0;},delayBetweenIcons*1000*currentWaypoints);}function determineIcon(_0x4ac6x11,_0x4ac6x15,_0x4ac6x16,_0x4ac6x12){allIconsF[_0x4ac6x11]=_0x4ac6x16;setTimeout(function(){var _0x4ac6x1e=_0x4ac6x16[_0xfee4[14]](_0xfee4[13]+_0x4ac6x15)[_0xfee4[12]];thisIcons[_0x4ac6x11]=_0x4ac6x1e;iconStyles[_0x4ac6x11]=_0x4ac6x1e[_0xfee4[15]];window[_0x4ac6x15](_0x4ac6x11,_0x4ac6x16,_0x4ac6x1e);tls[_0x4ac6x11][_0xfee4[16]]();tlsRollover[_0x4ac6x11][_0xfee4[16]]();if(useRollover&&iconLinks[_0x4ac6x11]){_0x4ac6x1e[_0xfee4[9]](_0xfee4[17],function(){if(tlsActive[_0x4ac6x11]){window[_0xfee4[19]][_0xfee4[18]]=iconLinks[_0x4ac6x11]}});iconStyles[_0x4ac6x11][_0xfee4[20]]=_0xfee4[21];_0x4ac6x1e[_0xfee4[9]](_0xfee4[22],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:hoverScale,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});_0x4ac6x1e[_0xfee4[9]](_0xfee4[27],function(){if(tlsActive[_0x4ac6x11]){TweenLite[_0xfee4[25]](_0x4ac6x1e,0.5,{scale:1,transformOrigin:_0xfee4[23],ease:Elastic[_0xfee4[24]]});if(tlsRollover[_0x4ac6x11]){tlsRollover[_0x4ac6x11][_0xfee4[26]]()};}});};setTimeout(function(){makeVisible(_0x4ac6x16,_0xfee4[28])},30);var _0x4ac6x1f= new Waypoint({element:_0x4ac6x12,handler:function(_0x4ac6x20){var _0x4ac6x21=parseInt(this[_0xfee4[32]][_0xfee4[31]](_0xfee4[29],_0xfee4[30]));playWhenVisible(_0x4ac6x21);},offset:_0xfee4[33]});},delayBetweenIcons*1000*_0x4ac6x11);}function animationComplete(_0x4ac6x11,_0x4ac6x23){tlsActive[_0x4ac6x11]=_0x4ac6x23;if(_0x4ac6x23){if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[11]]()}}else {if(tlsIdle[_0x4ac6x11]){tlsIdle[_0x4ac6x11][_0xfee4[34]]()}};}function restartIcons(_0x4ac6x25){for(var _0x4ac6x26=0;_0x4ac6x26<_0x4ac6x25[_0xfee4[2]];_0x4ac6x26++){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x26]],_0xfee4[35]);resetLines(_0x4ac6x25[_0x4ac6x26]);};(function _0x4ac6x27(_0x4ac6x14){setTimeout(function(){makeVisible(allIconsF[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]],_0xfee4[28]);tls[_0x4ac6x25[_0x4ac6x25[_0xfee4[2]]-_0x4ac6x14]][_0xfee4[26]]();if(--_0x4ac6x14){_0x4ac6x27(_0x4ac6x14)};},delayBetweenIcons*1000)})(_0x4ac6x25[_0xfee4[2]]);}

and import like this where you want to use

import {_0xfee4} from './dxicons.js';