React のエクスポート機能

必要な変数と関数を含むライブラリを作成する必要がある場合があります。 問題は、ライブラリ内の変数と関数を取得し、それらを別のスクリプトで使用する方法です。

答えは export キーワードの使用です。 ここで、export キーワードは、ライブラリの共有可能な要素を指定します。

この短い記事では、React JS で関数をエクスポートする方法を示します。 また、トピックを簡単にするために必要な例と説明も表示されます。

React で export 関数を使用する

以下の例では、別の JS ファイルを作成しました。ファイル内には、showmessage() という名前の関数があります。 showmessage() 関数をデフォルトの export として宣言しました。

コード - Export.js:

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

外部 JS ファイルの関数 showmessage() をエクスポートしたメインの JS ファイルを見てください。 メインの JS ファイルのこのコードは、次のようになります。

コード - 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;

上記のコードでは、まず必要なファイルをインポートし、main 関数内で handleClick を作成しました。 handleClick 内で、外部 JS ファイルからインポートした関数 showmessage() を渡しました。

上記のコードを実行すると、Web コンソールに以下の出力が表示されます。

This is an exported function !!!

この記事で共有するサンプル コードは、React JS プロジェクトで記述されています。 React プロジェクトを実行するには、システムに最新の Node JS バージョンが含まれている必要があります。