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

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

以上是 如何使用reactjs添加外部JavaScript文件 的全部内容, 来源链接: utcz.com/qa/421572.html

回到顶部