JSXの「デフォルトのエクスポート」は何をしますか？

152

最後の文の意味と機能（デフォルトのHelloWorld;をエクスポート）を確認したいのですが、それに関するチュートリアルが見つかりません。

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

javascript reactjs

— ディグウィード
ソース

302

エクスポートなどexport default HelloWorld;とインポートは、そのようなは、AS import React from 'react'の一部であるES6モジュールシステム。

モジュールは自己完結型のユニットでありexport、を使用してアセットを他のモジュールに公開したり、を使用して他のモジュールからアセットを取得したりできますimport。

あなたのコードで：

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ES6には2種類のエクスポートがあります。

名前付きエクスポート -たとえばexport function func() {}、という名前の名前付きエクスポートですfunc。名前付きモジュールは、を使用してインポートできますimport { exportName } from 'module';.。この場合、インポートの名前はエクスポートの名前と同じである必要があります。例のfuncをインポートするには、を使用する必要がありますimport { func } from 'module';。1つのモジュールに複数の名前付きエクスポートを含めることができます。

デフォルトのエクスポート -単純なインポートステートメントを使用する場合に、モジュールからインポートされる値ですimport X from 'module'。Xは、値を含むために割り当てられた変数にローカルに与えられる名前であり、オリジンエクスポートのように名前を付ける必要はありません。デフォルトのエクスポートは1つだけです。

モジュールには名前付きエクスポートとデフォルトエクスポートの両方を含めることができ、を使用してそれらを一緒にインポートできますimport defaultExport, { namedExport1, namedExport3, etc... } from 'module';。

— オリ・ドロリ
ソース

24

export default スクリプトファイルから単一のクラス、関数、またはプリミティブをエクスポートするために使用されます。

エクスポートは次のように書くこともできます

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

これを次のような関数コンポーネントとして書くこともできます

export default const HelloWorld = () => (<p>Hello, world!</p>);

これは、この関数を別のスクリプトファイルにインポートするために使用されます

import HelloWorld from './HelloWorld';

HelloWorldデフォルトのエクスポートであるため、任意の名前を付けることができるため、必ずしもインポートする必要はありません。

輸出について

名前が示すように、スクリプトファイルまたはモジュールから関数、オブジェクト、クラス、または式をエクスポートするために使用されます

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

これはインポートして次のように使用できます

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

または

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

デフォルトのエクスポートを使用すると、これははるかに簡単になります。スクリプトファイルがエクスポートするのは1つだけです。 cube.js

export default function cube(x) {
  return x * x * x;
};

App.jsとして使用

import Cube from 'cube';
console.log(Cube(3)); // 27

— sudo bangbang
ソース

11

簡単な言葉で-

関数、オブジェクト、またはプリミティブ値をモジュールからエクスポートするJavaScriptモジュールを作成するときに、exportステートメントを使用して、それらのモジュールをimportステートメントで他のプログラムが使用できるようにします。

ここに明確な理解を得るためのリンクがあります：MDN Web Docs

— アンキット・パンディ
ソース

8

の最も単純な理解default exportは

Export ES6の機能であり、モジュール（ファイル）をエクスポートして、他のモジュール（ファイル）で使用します。

デフォルトのエクスポート：

default export ファイル（モジュール）から1つのオブジェクト（変数、関数、クラス）のみをエクスポートする場合の規則です。
ファイルごとにデフォルトのエクスポートは1つだけですが、1つのエクスポートだけに制限されているわけではありません。
デフォルトでエクスポートされたオブジェクトをインポートするときに、名前を変更することもできます。

エクスポートまたは名前付きエクスポート：

同じ名前のオブジェクト（変数、関数、計算）をエクスポートするために使用されます。
1つのファイルから複数のオブジェクトをエクスポートするために使用されます。
別のファイルにインポートするときに名前を変更することはできません。エクスポートに使用したのと同じ名前にする必要があります。

React、Vue、およびその他の多くのフレームワークでは、モジュールベースのアプリケーションを作成するために、再利用可能なコンポーネントをエクスポートするためにエクスポートが主に使用されます。

— ムハンマド
ソース