将外部JavaScript文件添加到React.js应用

Question

我在将外部javaScript文件添加到我的React App时遇到了一个小问题。 我尝试了很多东西，但没有一个起作用。 我做的最后一件事是：

步骤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内部，您可以使用类名删除该文件。