导入导出组件

组件的神奇之处在于它们的可重用性：您可以创建由其他组件组成的组件。 但是当你嵌套越来越多的组件时，开始将它们拆分成不同的文件通常是有意义的。 这使您可以使文件易于扫描并在更多地方重复使用组件。

你将学习

• 什么是根组件文件
• 如何导入和导出组件
• 何时使用默认和命名的导入和导出
• 如何从一个文件导入和导出多个组件
• 如何将组件拆分成多个文件

根组件文件

在您的第一个组件中，您创建了一个 Profile 组件和一个呈现它的 Gallery 组件：

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

这位于根组件文件中，在此示例中名为 App.js。 在 Create React App 中，您的应用程序位于 src/App.js 中。 不过，根据您的设置，您的根组件可能位于另一个文件中。 如果您使用基于文件的路由框架，例如 Next.js，您的根组件对于每个页面都会不同。

导出和导入组件

如果你想在未来改变登陆屏幕并在那里放一个科学书籍列表怎么办？ 或者将所有配置文件放在其他地方？ 将 Gallery 和 Profile 移出根组件文件是有意义的。 这将使它们更加模块化并可在其他文件中重用。 您可以分三步移动组件：

1. 制作一个新的 JS 文件来放入组件。
2. 从该文件导出您的功能组件（使用默认或命名导出）。
3. 将其导入到您将使用该组件的文件中（使用相应的技术导入默认或命名导出）。

这里 Profile 和 Gallery 都已从 App.js 移出到一个名为 Gallery.js 的新文件中。 现在您可以更改 App.js 以从 Gallery.js 导入 Gallery：
Gallery.js

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

App.js

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

注意这个例子现在是如何分解成两个组件文件的：

1. Gallery.js：

• 定义仅在同一文件中使用且不导出的Profile组件。
• 将 Gallery 组件导出为默认导出。

2. App.js：

• 从 Gallery.js 导入 Gallery 作为默认导入。
• 将根 App 组件导出为默认导出。

!注意

您可能会遇到像这样没有 .js 文件扩展名的文件：

import Gallery from './Gallery';

'./Gallery.js' 或 './Gallery' 都可以与 React 一起使用，尽管前者更接近于原生 ES 模块的工作方式。

深度阅读：默认与命名导出

使用 JavaScript 导出值有两种主要方式：默认导出和命名导出。 到目前为止，我们的示例只使用了默认导出。 但是您可以在同一个文件中使用其中一个或两个。 一个文件最多只能有一个默认导出，但它可以有任意多个命名导出。

您如何导出组件决定了您必须如何导入它。 如果您尝试以与命名导出相同的方式导入默认导出，则会出现错误！ 此图表可以帮助您跟踪：

语法	导出声明	导入声明
默认	export default function Button() {}	import Button from './button.js';
命名	export function Button() {}	import { Button } from './button.js';

当您编写默认导入时，您可以在导入后输入任何您想要的名称。 例如，您可以改为编写 import Banana from './button.js'，它仍会为您提供相同的默认导出。 相反，对于命名导入，名称必须在两侧匹配。 这就是为什么它们被称为命名导入！

如果文件仅导出一个组件，人们通常使用默认导出，如果导出多个组件和值，则使用命名导出。 无论您喜欢哪种编码风格，请始终为您的组件函数和包含它们的文件提供有意义的名称。 不鼓励使用没有名称的组件，例如 export default () => {}，因为它们会使调试更加困难。

从同一文件导出和导入多个组件

如果您只想显示一个Profile而不是Gallery怎么办？ 您也可以导出Profile组件。 但是 Gallery.js 已经有一个默认导出，你不能有两个默认导出。 您可以创建一个带有默认导出的新文件，或者您可以为配置文件添加一个命名导出。 一个文件只能有一个默认导出，但它可以有多个命名导出！

为了减少默认导出和命名导出之间的潜在混淆，一些团队选择只坚持一种样式（默认或命名），或者避免将它们混合在一个文件中。 这是一个偏好问题。 做最适合您的事情！

首先，使用命名导出（无default关键字）从 Gallery.js 导出Profile：

export function Profile() {
  // ...
}

然后，使用命名导入（带花括号）将 Profile 从 Gallery.js 导入 App.js：

import { Profile } from './Gallery.js';

最后，从 App 组件渲染 <Profile />：

export default function App() {
  return <Profile />;
}

现在 Gallery.js 包含两个导出：一个默认的 Gallery 导出和一个命名的 Profile 导出。 App.js 导入它们。 尝试将 <Profile /> 编辑为 <Gallery /> 并在此示例中返回：
Gallery.js

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

App.js

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

现在您正在混合使用默认和命名导出：

• Gallery.js：
  • 将 Profile 组件导出为名为 Profile 的命名导出。
  • 将 Gallery 组件导出为默认导出。
• App.js：
  • 从 Gallery.js 中将 Profile 作为名为 Profile 的命名导入导入。
  • 从 Gallery.js 导入 Gallery 作为默认导入。
  • 将根 App 组件导出为默认导出。

回顾

本页上，您了解到：

• 什么是根组件文件
• 如何导入和导出组件
• 何时以及如何使用默认和命名的导入和导出
• 如何从同一个文件中导出多个组件