当前位置: 首页 > 面试题库 >

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

相温文
2023-03-14
问题内容

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

谁能帮我解决这个难题


问题答案:

导出您的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代码,而无需制作函数的可导出版本,只需要文件即可。



 类似资料:
  • 直到最近,我还只是在使用一个简单的Java项目。我最近决定将其升级为使用gradle包装器和NetBeans12,但现在该程序无法检测beep3.wav文件。 我看过这个、这个和很多其他的页面,但是没有一个关于向jar添加文件的信息,所以我假设我正在寻找错误的信息。 你能帮个忙吗?我只需要获得wav文件,以便在构建项目时自动插入到jar中。

  • 问题内容: 我有一个电子应用程序。我尝试使该应用程序打开一个.exe文件。我在根文件夹中创建了一个目录,并将.exe文件放置在该目录中。在开发中,使用可以打开文件没有问题,但是当我打包应用程序(使用)时,它不会打开exe文件,并且该文件夹上也没有文件夹。 我尝试编写使用来控制台默认位置的脚本,并输出(文件)。 打包应用程序后,如何添加可以访问的外部文件? 问题答案: 通过使用extraResour

  • 使用Android Studio是这项任务的必备条件。 谢了。

  • 问题内容: 如何使用Javascript 添加CSS规则(例如)? 问题答案: 您也可以使用DOM Level 2 CSS接口(MDN)执行此操作: …(除了(自然地)IE8和更早版本以外的所有版本),它使用自己的边际差异措辞: 与createElement-set- innerHTML方法相比,此方法具有理论上的优势,因为您不必担心在innerHTML中放置特殊的HTML字符,但实际上,样式元素

  • 问题内容: 我有以下两个javascript函数: 1 2 我想将它们放在外部“ .js”文件中 1 2 调用这些函数的正确语法是什么? 问题答案: 像这样的代码 希望对您有帮助。…谢谢

  • 问题内容: 我有一个名为的HTML文件: 另一个JavaScript文件放置在同一目录的文件夹中。 加载HTML文件时,此代码工作正常,但是当我在服务器中运行该代码时,此代码不起作用。 我使用Python的Flask框架进行后端编程,有趣的是,如果我在HTML文件中扩展JavaScript代码,则同样的东西也可以很好地工作。唯一的问题是外部文件。 问题答案: 将文件用作静态资源: 将文件移动到包的