匯出 React 元件

1. 在 React 中重用元件的匯出語句型別
2. 在 React 中使用命名匯出匯出元件
3. 在 React 中使用預設匯出匯出元件

開發人員喜歡 React 框架，因為它允許你建立可重用的元件並在必要時使用它們。在開發構建中，元件被拆分為許多不同的檔案，因此瞭解匯入和匯出它們的約定很有用。

本文將探討在 React 中匯出元件的不同方法。

在 React 中重用元件的匯出語句型別

Export 和 Import 語句允許 React 開發人員將元件拆分為多個檔案。如有必要，開發人員還可以將多個邏輯連線的元件放在一個檔案中。

匯出語句的型別會影響外部檔案中元件的可用性。export 語句使來自特定檔案的實時繫結在其他任何地方都可用。其他檔案可以使用 import 語句載入這些實時繫結中的值。

匯入繫結時，你應該記住它的源值可以隨時更改。如果匯出模組的原始檔中的值發生更改，它將在所有匯入的地方更新。預設情況下，export 語句自動按照嚴格模式規則執行。

我們通常可以區分兩種型別的匯出：命名和預設匯出。命名匯出可用於匯出任意數量的繫結，或者根本不匯出。預設匯出更具限制性，因為每個檔案只能有一種匯出型別。

兩種型別的匯出之間存在語法差異。我們將在下面的部分中詳細討論它們。匯出的型別也會影響你在匯入時需要使用的語法。

在 React 中使用命名匯出匯出元件

Webpack 和 ES6 簡化了檔案的匯入和匯出過程。儘管如此，關於命名匯出的一些混淆仍然需要清除。

如果一個檔案有多個元件，你可以使用命名匯出。使用命名匯出來為每個檔案匯出多個元件（或其他繫結）可能會更好。

此外，命名匯出和匯入的語法可以說更直接。匯入以這種方式匯出的繫結時，你必須使用與原始檔相同的名稱。

讓我們看一個例子：

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

我們可以使用以下語法將這些元件匯入另一個檔案：

import {Talk, Greet} from "./components/source.jsx"

此示例在字串之間指定原始檔的路徑。我們還在原始檔中使用相同的繫結名稱並將它們放在大括號之間。

如果你不使用花括號語法，文件將解釋為你正在嘗試匯入與預設匯出共享的繫結。你不能使用匯入預設匯出的語法來匯入命名匯出；你會得到一個錯誤。

如果你認為繫結名稱不清楚，可以在匯出前重新命名。在上面的例子中，我們可以這樣做：

export {Greet as Greeting}

在 React 中使用預設匯出匯出元件

大多數 React 應用程式都遵循為每個元件建立單獨檔案的模式。此約定使預設匯出對於匯出元件很有用。

以這種方式匯出的元件更容易匯入。由於它們是檔案中唯一的匯出，因此只要你獲得正確的檔案路徑，你就可以將它們命名為任何你想要的名稱。

JavaScript 將瞭解你要查詢的檔案。而且你不必使用花括號。讓我們看一下這個例子：

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

這裡提供了這兩種型別的匯出示例。

如果我們想匯入 App 元件，我們只需要這樣做：

import Application from "./components/App.jsx"

我們不必使用花括號，也不必使用原始檔中的相同繫結名稱。我們有即興創作的自由。這樣，該值將被重新命名，在此檔案中，我們可以將其稱為 Application 而不是 App。

在上面的示例中，我們在 export default 語句之後定義了函式元件。我們也可以單獨定義它並在語句中引用它。

例如：

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

對於某些人來說，這是一種更具可讀性的方法。預設匯出的唯一實際缺點是它們只能應用於每個檔案的一個元件。