如何使用 reactjs 添加外部 javascript 文件答案

【问题标题】：How to add external javascript file with reactjs如何使用 reactjs 添加外部 javascript 文件
【发布时间】：2017-04-30 01:55:03
【问题描述】：

我有一个外部JS 文件script.js

(function($) {
// Mega Menu
    $('.toggle-icon').on('click', function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass('active');
        $(this).next().slideUp();
    } else {
        $(this).find('.toggle-icon').removeClass('active');
        $(this).find('ul').slideUp();
        $(this).addClass('active').next().slideDown();
    }
});

   // End Mega Menu
    });

我想在我的 React-Redux 应用程序中添加这个文件

谁能帮我解开这个谜

【问题讨论】：

像任何其他脚本一样将其包含在 HTML 页面中？
@FelixKling 让我试试
@FelixKling 不工作

标签： javascript reactjs react-redux

【解决方案1】：

导出你的 js 代码，然后在你的 react 组件中导入它。

export function toggleIcon() {
  $('.toggle-icon').on('click', function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
      $(this).next().slideUp();
    } else {
      $(this).find('.toggle-icon').removeClass('active');
      $(this).find('ul').slideUp();
      $(this).addClass('active').next().slideDown();
    }
  });
}

然后你可以在你的 react 组件中导入它。

// custom is the path to the file that holds your js code
import { toggleIcon } from './custom';

然后在你的 react 组件中调用它，例如在 componentDidMount 这样的 react 生命周期方法中。

componentDidMount() {
  toggleIcon();
}

另一种（更快）的方法是在你的 react 组件中使用 require 来加载 js 代码。

require('./custom');

这样你可以立即加载 js 代码，并且你不需要制作函数的可导出版本，它只需要文件。

【讨论】：

【解决方案2】：

你需要导出你的文件，然后在你的 React-app 中导入它，建议在你的 React 应用中包含这些类型的逻辑，但是如果你真的需要，导出你的函数并在你需要的 React 组件中导入，你也可以给你的函数命名，比如下面的代码：

export function toggleIcon () {
     $('.toggle-icon').on('click', function() {
      if ($(this).hasClass("active")) {
        $(this).removeClass('active');
        $(this).next().slideUp();
    } else {
        $(this).find('.toggle-icon').removeClass('active');
        $(this).find('ul').slideUp();
        $(this).addClass('active').next().slideDown();
    }
}

并导入它：

import {toggleIcon} from 'custom';

toggleIcon(); // call your external function like this

【讨论】：

其实script.js大文件为了快速理解我只写了一个函数所以在这种情况下如何解决它？？
是的，你可以导出整个东西，你也可以将它分配给 var 或 const 来导出它，如果你作为 IFEE 来做，只需将它导入到你喜欢的地方，它应该可以工作

【解决方案3】：

尝试将ToogleIcon 而不是toogleIcon 放在要实例化它的组件中。

import {ToggleIcon} from 'custom';

ToggleIcon(); // call your external function like this

和export default而不是export

export default function toggleIcon () {
 $('.toggle-icon').on('click', function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    $(this).next().slideUp();
} else {
    $(this).find('.toggle-icon').removeClass('active');
    $(this).find('ul').slideUp();
    $(this).addClass('active').next().slideDown();
}
}

【讨论】：