webentwicklung-frage-antwort-db.com.de

Wie fügt man eine externe Javascript-Datei mit dem Befehl67 hinzu?

Ich habe eine externe JS-Datei 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
    });

ich möchte diese Datei in meine React-Redux App einfügen

Kann mir bitte jemand helfen, dieses Rätsel zu lösen 

7
Anish

Exportieren Sie Ihren js-Code und importieren Sie ihn dann in Ihre Reaktionskomponente.

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

Dann können Sie es in Ihre Reaktionskomponente importieren.

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

Rufen Sie es dann in Ihrer React-Komponente auf, beispielsweise in einer React-Lifecycle-Methode wie componentDidMount.

componentDidMount() {
  toggleIcon();
}

Eine andere (schnellere) Möglichkeit besteht darin, require in Ihrer Reaktionskomponente zu verwenden, um den js-Code zu laden.

require('./custom');

Auf diese Weise laden Sie den js-Code sofort und müssen keine exportierbare Version Ihrer Funktion erstellen, sondern benötigen lediglich die Datei.

10
bntzio

Sie müssen Ihre Datei exportieren und anschließend in Ihre React-App importieren. Es wird empfohlen, diese Art von Logik in Ihre React-App aufzunehmen. Wenn Sie dies wirklich benötigen, exportieren Sie Ihre Funktion und importieren Sie sie in die React-Komponente Benennen Sie auch, so etwas wie der folgende Code:

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

und importiere es:

import {toggleIcon} from 'custom';

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

Versuchen Sie, ToogleIcon anstelle von toogleIcon in die Komponente einzufügen, in der Sie die Instanz einfügen möchten.

import {ToggleIcon} from 'custom';

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

und export default anstelle von 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