Reactコンポーネントで期待される宣言または式をエクスポートします。輸出方法の違い

Question

私は反応成分を持っています。コードは以下の通りです

import React from 'react'; 
export const Header=()=>{ 

     return(
      <div>this test</div> 
     ); 
} 

この作業は適切です。

私は以下のコードを使用すると、エラー、エクスポート宣言または式が期待されます。

import React from 'react'; 
const Header=()=>{ 

     return(
      <div>this test</div> 
     ); 
} 

export Header; 

これらの2つのエクスポートの違いについては、いくつか説明できますか。 ありがとうございます。

Answer 1

あなたは、輸出{NAME1、NAME2、...、nameN}

export { Header }; 

または

export { Header as Smth }; 

Docs

を必要とするという名前の輸出をしたい場合は、

export {variable1 as name1、variable2 as name2、...、nameN};

export let name1、name2、...、nameN; //また、var、function

export let name1 = ...、name2 = ...、...、nameN; //またvar、const

export nameは無効な構文です。

Answer 2

あなたは二番目の作品を作るために

export default Header 

を使用することができます。 はその後、あなたは、ファイルの相対パスが./Header.jsであることを考えると

import Header from './Header' 

あるいは

import InsertAnythingHere from './Header' 

で別のファイルからインポートすることもできます。