これはなぜ我々は通常、エクスポートのコンポーネントをエクスポートするためにエクスポートdeafult [コンポーネント名]を書くのだろうか?

2591 ワード

私は非常にいくつかの時間をエクスポートdeafult [コンポーネント名]を使用して反応成分をエクスポートするの背後にある理由を不思議に思っていたが、最近私はなぜですか?
コンポーネントをデフォルトでエクスポートするときには、そのコンポーネントをインポートするのに役立ちます.JSファイルを使用します.まだ混乱?この例をチェック
greetコンポーネントの場合は、次のコードを書き留めます
import React from 'react'

function Greet() {
    return (
        <div>
            <h1>Hello,Greetings!</h1>
        </div>
    )
}

export default Greet
アプリで.jsファイル
import './App.css';
import Greet from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
この2つのスニペットは次の出力を生成します:

今、我々はアプリのインポート名を変更します.JSとスニペットは次のようになります.
import './App.css';
import Greetings from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;

結果は同じです.


名称エクスポート
ここで挨拶.JSは次のようになります.
import React from 'react'

export const Greet = () => <h1>Hello,Greetings</h1>
とアプリ.以下のようなJS :
import './App.css';
import {Greet} from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
名前付きコンポーネントの場合は、エラーを発生させるので、アプリケーションを見てインポートコンポーネントの名前を変更することはできません.名前付きコンポーネントの場合、名前を変更しました
import './App.css';
import {Greetings} from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;
また、生成されたエラーも参照ください.

おそらく今では、エクスポートはデフォルトを取り、名前付きコンポーネントを使用する場合に何が起こるかを知っています.