导入和导出组件

组件的魔力在于其可复用性：你可以创建由其他组件组成的组件。但是，随着嵌套的组件越来越多，通常有必要开始将它们拆分到不同的文件中。这可以使你的文件易于浏览，并在更多地方复用组件。

根组件文件

在第一个组件中，你创建了一个Profile组件和一个渲染它的Gallery组件：

这些组件目前位于一个根组件文件中，在此示例中名为App.js。不过，根据你的设置，根组件可能位于其他文件中。如果你使用基于文件路由的框架（例如 Next.js），每个页面的根组件都会不同。

导出和导入组件

如果你将来想更改初始屏幕，在那里放置一个科学书籍列表怎么办？或者将所有个人资料放在其他地方？将Gallery和Profile移出根组件文件是合理的。这将使它们更加模块化，并可在其他文件中复用。你可以通过三个步骤移动组件：

1. 创建一个新的 JS 文件来存放组件。
2. 从该文件导出你的函数组件（使用默认或命名导出）。
3. 在要使用该组件的文件中导入它（使用相应的技术导入默认或命名导出）。

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

请注意，此示例现在被分解为两个组件文件：

1. Gallery.js：
   • 定义了 Profile 组件，该组件仅在同一文件内使用且未导出。
   • 将 Gallery 组件作为 默认导出。
2. App.js：
   • 从 Gallery.js 以 默认导入的方式导入Gallery。
   • 将根组件 App 作为 默认导出。

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

如果你只想显示一个 Profile而不是整个画廊呢？你也可以导出Profile 组件。但是 Gallery.js已经有一个默认 导出，而你不能有 两个默认导出。你可以创建一个具有默认导出的新文件，或者可以为Profile添加一个命名导出。一个文件只能有一个默认导出，但可以有多个命名导出！

使用命名导出（不使用default关键字）从

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

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

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

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

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

回顾

在本页面中，你学习了：

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