如何使用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应用程序中添加此文件

任何人都可以帮我解决这个谜

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';

然后在您的反应组件中调用它,例如在反应生命周期方法中componentDidMount.

componentDidMount() {
  toggleIcon();
}

另一种(更快)方法是require在您的react组件中使用加载js代码.

require('./custom');

这样你就可以立即加载js代码,而且你不需要为你的函数创建一个可导出的版本,它只需要文件.