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

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

1 个答案: