如何使用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 codeimport { toggleIcon } from './custom';
然后在您的react组件中调用它,例如,在诸如之类的react生命周期方法中componentDidMount
。
componentDidMount() { toggleIcon();
}
另一种(更快)的方法是require
在您的react组件中使用来加载js代码。
require('./custom');
这样,您就可以立即加载js代码,而无需制作函数的可导出版本,只需要文件即可。
以上是 如何使用reactjs添加外部JavaScript文件 的全部内容, 来源链接: utcz.com/qa/421572.html