javascript - 将外部 javascript 文件添加到 React.js 应用程序

Question

我在将外部 javaScript 文件添加到我的 React 应用程序时遇到了一些问题。我尝试了很多方法，但没有一个有效。我做的最后一件事是:

步骤#1:创建 JS 文件并创建函数。

步骤#2:从我的 js 文件导入函数。

步骤#3:调用函数。

问题是当我运行:npm start 时，一切正常。但是当我运行: nom build 时，脚本将无法工作!

这是我使用导出函数创建的 js 文件

            export function BackgroundMove() {
            $(document).ready(function() {
                let movementStrength = 25;
                let height = movementStrength / $(window).height();
                let width = movementStrength / $(window).width();
                $("body").mousemove(function(e){
                        let pageX = e.pageX - ($(window).width() / 2);
                        let pageY = e.pageY - ($(window).height() / 2);
                        let newvalueX = width * pageX * -1 - 25;
                        let newvalueY = height * pageY * -1 - 50;
                        $('body').css("background-position", newvalueX+"px     "+newvalueY+"px");
                });
                });
            }


            export function HeaderMove() {
                $(document).ready(function(){
                    $('#nav-icon0,#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
                        $(this).toggleClass('open');
                    });
                });
            }

这里我正在导入我的函数

    import {HeaderMove, BackgroundMove} from '../../style';

调用函数:

   componentDidMount() {
      HeaderMove();
      BackgroundMove();
    }

正如我提到的，当我运行时这会正常工作

 npm start 

但是，当我运行时

npm build

我的脚本无法运行

Answer 1

请引用以下代码在组件内导入外部javascript文件:

componentDidMount() {
   var script = document.createElement('script')
   script.src = // path of external javascript file.
   script.class = "external-script"
   document.body.appendChild(script);
}

在 componentWillUnmount 中，您可以使用类名删除该文件。