web-dev-qa-db-fra.com

Comment ajouter un fichier javascript externe avec reactjs

J'ai un fichier JS externe 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
    });

je veux ajouter ce fichier dans mon application React-Redux

Quelqu'un peut-il m'aider s'il vous plaît à résoudre ce mystère 

javascriptreactjsreact-redux
7
Anish

Vous devez exporter votre fichier, puis l’importer dans votre application React. Il est recommandé d’inclure ce type de logique dans votre application React, mais si vous en avez vraiment besoin, exportez votre fonction et importez-la dans le composant React dont vous avez besoin, nommez également votre fonction, quelque chose comme le code ci-dessous:

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

et l'importer:

import {toggleIcon} from 'custom';

toggleIcon(); // call your external function like this
2
Alireza

Essayez de mettre ToogleIcon au lieu de toogleIcon dans le composant où vous voulez l’introduire.

import {ToggleIcon} from 'custom';

ToggleIcon(); // call your external function like this

et export defaultau lieu de 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();
}
}
0
JuMoGar