☰

JSX で「export default」は何をしますか? 質問する

tag-icon • tag-icon javascript reactjs
JSX で「export default」は何をしますか? 質問する

最後の文 (export default HelloWorld;) が何を意味し、何をするのかを知りたいのですが、それに関するチュートリアルが見つかりません。

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

ベストアンサー1

輸出好きexport default HelloWorld;と輸入、例えば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';。

おすすめ記事