デフォルトと名前付きエクスポートの両方をインポートする場合、JavaScript インポート構文で括弧はどのように機能しますか?

JavaScript インポート構文における括弧について

JavaScript では、括弧を使用したインポート構文により、デフォルトと名前付きエクスポートの両方を処理する柔軟な方法が提供されます。モジュール。その使用法と影響を調べてみましょう。

デフォルトと名前付きエクスポート

慣例により、モジュールは通常、単一のデフォルト エクスポートまたは名前付きエクスポートのコレクションを公開します。デフォルトのエクスポートは中かっこなしで変数に割り当てられますが、名前付きエクスポートでは、エクスポートされたシンボルを囲むために明示的に中かっこで囲む必要があります。

かっこを使用したインポート

インポートでかっこを使用する場合ステートメントでは、基本的に、デフォルトと名前付きのエクスポート インポート メソッドの両方を組み合わせることになります。たとえば、次の構文:

import React, { Component, PropTypes } from 'react';

は、デフォルトのエクスポート React を同じ名前でインポートし、名前付きエクスポート Component と PropType も元の名前でインポートします。

簡略化された構文

このメソッドは、2 つの一般的なメソッドを組み合わせたものです。構文:

import React from 'react';
import { Component, PropTypes } from 'react';

最初の行はデフォルトのエクスポートをインポートし、2 行目は名前付きエクスポートをインポートします。

モジュールのエクスポート構造

通常、モジュールは、デフォルトのエクスポートまたは名前付きエクスポートのセットを提供します。ただし、モジュールが両方を提供する場合もあります。このような場合、括弧を使用した構文を使用すると、両方のタイプのエクスポートを同時にインポートできます。

MDN ドキュメントとの比較

以前のバージョンの MDN ドキュメントでは、インポートが次のように行われると誤って主張されていました。括弧は、指定された名前でインポートされた値を受け取るオブジェクトを作成します。これは事実ではありません。中かっこは、デフォルトのエクスポートも含めて、名前付きエクスポートを明示的にインポートします (存在する場合)。

重要な注意事項

• 名前付きエクスポートには、デフォルトのエクスポートからはアクセスできません。
• * ワイルドカード演算子はすべての名前付きエクスポートを 1 つのオブジェクトにインポートできますが、default キーワードはデフォルトのエクスポートをインポートできます別途。

以上がデフォルトと名前付きエクスポートの両方をインポートする場合、JavaScript インポート構文で括弧はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。