如何使用reactjs添加外部JavaScript文件

Question

我有一个外部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 App中

谁能帮我解决这个难题

Answer 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组件中调用它，例如，在诸如之类的react生命周期方法中componentDidMount。

componentDidMount() {
  toggleIcon();
}

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

require('./custom');

这样，您就可以立即加载js代码，而无需制作函数的可导出版本，只需要文件即可。