如何使用 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

您需要导出文件，然后将其导入到您的 React 应用程序中，建议在您的 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

Answer 2

尝试将 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();
}
}

Answer 3

导出你的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 代码，而且你不需要制作函数的可导出版本，它只需要文件。

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

How to add external javascript file with reactjs

javascript

reactjs

react-redux