[英]How to add external javascript file with reactjs
I have an external JS
file script.js
我有一个外部
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
});
i want to add this file in my React-Redux App 我想在我的React-Redux应用程序中添加此文件
Can anyone please help me to solve this mystery 任何人都可以帮我解决这个谜
Export your js code and then import it in your react component. 导出您的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();
}
});
}
Then you can import it in your react component. 然后,您可以在您的react组件中导入它。
// custom is the path to the file that holds your js code
import { toggleIcon } from './custom';
Then call it in your react component, for example in a react lifecycle method like componentDidMount
. 然后在您的react组件中调用它,例如在
componentDidMount
类的react生命周期方法中。
componentDidMount() {
toggleIcon();
}
Another (faster) way is by using require
in your react component to load in the js code. 另一种(更快)的方法是在您的react组件中使用
require
来加载js代码。
require('./custom');
That way you load the js code immediately, and you don't need to make an exportable version of your function, it just requires the file. 这样你就可以立即加载js代码,而且你不需要为你的函数创建一个可导出的版本,它只需要文件。
You need export your file and then import it in your React-app, it's recommended to include these kinds of logics in your React app, but if you really needed, export your function and import in the React Component which you need it, you can name you function as well, something like the below code: 你需要导出你的文件,然后在你的React-app中导入它,建议在你的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();
}
}
and import it: 并导入它:
import {toggleIcon} from 'custom';
toggleIcon(); // call your external function like this
Try to put ToogleIcon
instead of toogleIcon
in the component where you want instance it. 尝试在要实例化的组件中放置
ToogleIcon
而不是toogleIcon
。
import {ToggleIcon} from 'custom';
ToggleIcon(); // call your external function like this
and export default
instead of export
并
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.