在 React 中匯出預設值

我們將介紹 React 中的 export 型別以及它們的作用。

React 中的匯出型別

像 export default ReactApp; 一樣匯出和 import like import logo from './logo.svg' 是 ES6 模組系統的一部分。

ES6 中有兩種匯出：命名匯出和預設匯出。

React 中的命名匯出

使用函式名稱匯出的匯出稱為命名匯出，例如 export Function ExFunc(){}。

可以使用 import { ExFunc } from 'module'; 匯入命名模組。匯入名稱應與匯出名稱相同，如本例中的 ExFunc。

我們可以在一個模組中有多個命名的 exports。

React 中的預設匯出

預設 export 用於從模組中匯出單個類、原語或函式。有不同的方法可以使用預設的 export。

通常，預設的 export 寫在函式之後，如下例所示。

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

但也可以像下面這樣寫。

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

而對於函式，它可以寫成。

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

一旦我們使用了預設的 export，我們不一定需要將其作為 ReactApp 匯入；我們可以給它起任何名字。

# react
import Y from './ReactApp';

Y 是本地分配給包含該值的變數的名稱，不必將其命名為原始匯出。

使用預設匯出時要記住的一件重要事情是，與命名匯出不同，只能有一個預設匯出。一個模組可以同時命名為 export 和一個預設 export，它們可以一起匯入。

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';