Comment ajouter un fichier javascript externe avec reactjs

J'ai un externe JS fichier 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 Réagir-Redux Application

Quelqu'un peut-il m'aider à résoudre ce mystère

Simplement l'inclure dans la page HTML, comme n'importe quel autre script?
permettez-moi de donner un essai
sa ne fonctionne pas

OriginalL'auteur Anish | 2017-04-30

  1. 6

    Exporter votre code js et ensuite l'importer dans votre réagissent composant.

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

    Ensuite, vous pouvez l'importer dans votre réagissent composant.

    //custom is the path to the file that holds your js code
import { toggleIcon } from './custom';

    Puis l'appeler dans votre réagissent composant, par exemple dans une réagir cycle de vie de la méthode comme componentDidMount.

    componentDidMount() {
  toggleIcon();
}

    L'autre (plus rapide) façon est d'utiliser require dans votre réagissent composant à charger dans le code js.

    require('./custom');

    De cette façon, vous chargez le code js immédiatement, et vous n'avez pas besoin de faire une version exportable de votre fonction, il faut juste le fichier.

    OriginalL'auteur bntzio

  2. 2

    Vous devez exporter votre fichier puis de l'importer dans votre Réagissent-app, il est recommandé d'inclure ces types de logiques dans vos Réagir application, mais si vous avez vraiment besoin, l'exportation de votre fonction et de l'importation dans le Réagir Composant dont vous avez besoin, vous pouvez le nom de la fonction en tant que bien, 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 de l'importer:

    import {toggleIcon} from 'custom';

toggleIcon(); //call your external function like this
    En fait script.js fichier de grande taille pour la compréhension rapide, j'ai écrit qu'une seule fonction dans ce cas, comment le résoudre??
    Oui, vous pouvez exporter l'ensemble de la chose, vous pouvez l'affecter à var ou const pour l'exporter en tant que bien, si vous ne l'IFEE, il suffit d'importer à l'endroit où vous le souhaitez et cela devrait fonctionner

    OriginalL'auteur Alireza

  3. 0

    Essayer de mettre ToogleIcon au lieu de toogleIcon dans le composant où vous voulez instance.

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

    OriginalL'auteur JuMoGar