导出 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

对于某些人来说，这是一种更具可读性的方法。默认导出的唯一实际缺点是它们只能应用于每个文件的一个组件。