Exportfunktion in React

Manchmal müssen wir eine Bibliothek erstellen, die notwendige Variablen und Funktionen enthält. Die Frage ist, wie wir die Variablen und Funktionen in eine Bibliothek bekommen und sie in einem anderen Skript verwenden können.

Die Antwort ist die Verwendung des Schlüsselworts export. Jetzt gibt das Schlüsselwort export hier die gemeinsam nutzbaren Elemente einer Bibliothek an.

Dieser kurze Artikel zeigt, wie wir Funktionen in React JS exportieren können. Außerdem werden wir notwendige Beispiele und Erklärungen sehen, um das Thema einfacher zu machen.

Verwenden Sie die export-Funktion in React

Wir haben im folgenden Beispiel eine separate JS-Datei erstellt, und in der Datei gibt es eine Funktion namens showmessage(). Wir haben die Funktion showmessage() als Standard export deklariert.

Code - Export.js:

function showmessage() {
  console.log('This is an exported function !!!');
}
export default showmessage;  // Exporting the function

Werfen Sie einen Blick auf unsere Haupt-JS-Datei, in der wir die Funktion showmessage() für unsere externe JS-Datei exportiert haben. Dieser Code für unsere Haupt-JS-Datei sieht wie folgt aus.

Code - App.js:

import './App.css';

import showmessage from './Export';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    showmessage();
  }

  return (
    <a href='#' onClick={handleClick}>
      Click me
    </a>
  );
}
export default App;

Im obigen Code haben wir zuerst die notwendigen Dateien importiert und innerhalb der Hauptfunktion ein handleClick erstellt. Innerhalb des handleClick haben wir gerade die Funktion showmessage() übergeben, die wir aus unserer externen JS-Datei importiert haben.

Wenn Sie den obigen Code ausführen, erhalten Sie die folgende Ausgabe in Ihrer Webkonsole.

This is an exported function !!!

Die in diesem Artikel geteilten Beispielcodes wurden im React JS-Projekt geschrieben. Ihr System muss die neueste Node JS-Version enthalten, um ein React-Projekt auszuführen.