组件的导入与导出 | Importing and Exporting Components

根组件文件 | The root component file

In Your First Component, you made a Profile component and a Gallery component that renders it: 在 你的第一个组件 中，你创建了一个 Profile 组件，并且渲染在 Gallery 组件里。

These currently live in a root component file, named App.js in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. 在此示例中，所有组件目前都定义在 根组件 App.js 文件中。具体还需根据项目配置决定，有些根组件可能会声明在其他文件中。如果你使用的框架基于文件进行路由，如 Next.js，那你每个页面的根组件都会不一样。

导出和导入一个组件 | Exporting and importing a component

What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move Gallery and Profile out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: 如果将来需要在首页添加关于科学书籍的列表，亦或者需要将所有的资料信息移动到其他文件。这时将 Gallery 组件和 Profile 组件移出根组件文件会更加合理。这会使组件更加模块化，并且可在其他文件中复用。你可以根据以下三个步骤对组件进行拆分：

1. Make a new JS file to put the components in.

• 创建 一个新的 JS 文件来存放该组件。

2. Export your function component from that file (using either default or named exports).

• 导出 该文件中的函数组件（可以使用 默认导出 或 具名导出）

3. Import it in the file where you’ll use the component (using the corresponding technique for importing default or named exports).

• 在需要使用该组件的文件中 导入（可以根据相应的导出方式使用 默认导入 或 具名导入）。

Here both Profile and Gallery have been moved out of App.js into a new file called Gallery.js. Now you can change App.js to import Gallery from Gallery.js: 这里将 Profile 组件和 Gallery 组件，从 App.js 文件中移动到了 Gallery.js 文件中。修改后，即可在 App.js 中导入 Gallery.js 中的 Gallery 组件:

Notice how this example is broken down into two component files now: 该示例中需要注意的是，如何将组件拆分成两个文件：

1. Gallery.js:

• Gallery.js:
  • Defines the Profile component which is only used within the same file and is not exported.
  • 定义了 Profile 组件，该组件仅在该文件内使用，没有被导出。
  • Exports the Gallery component as a default export.
  • 使用 默认导出 的方式，将 Gallery 组件导出

2. App.js:

• App.js:
  • Imports Gallery as a default import from Gallery.js.
  • 使用 默认导入 的方式，从 Gallery.js 中导入 Gallery 组件。
  • Exports the root App component as a default export.
  • 使用 默认导出 的方式，将根组件 App 导出。

import Gallery from './Gallery';

深入探讨

默认导出 vs 具名导出 | Default vs named exports

显示更多

There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. A file can have no more than one default export, but it can have as many named exports as you like. 这是 JavaScript 里两个主要用来导出值的方式：默认导出和具名导出。到目前为止，我们的示例中只用到了默认导出。但你可以在一个文件中，选择使用其中一种，或者两种都使用。一个文件里有且仅有一个 默认 导出，但是可以有任意多个 具名 导出。

How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: 组件的导出方式决定了其导入方式。当你用默认导入的方式，导入具名导出的组件时，就会报错。如下表格可以帮你更好地理解它们：

语法/Syntax	导出语句/Export statement	导入语句/Import statement
默认/Default	export default function Button() {}	import Button from './Button.js';
具名/Named	export function Button() {}	import { Button } from './Button.js';

When you write a default import, you can put any name you want after import. For example, you could write import Banana from './Button.js' instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That’s why they are called named imports! 当使用默认导入时，你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js'，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是称其为 具名 导入的原因！

People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values. Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like export default () => {}, are discouraged because they make debugging harder. 通常，文件中仅包含一个组件时，人们会选择默认导出，而当文件中包含多个组件或某个值需要导出时，则会选择具名导出。 无论选择哪种方式，请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件，比如 export default () => {}，因为这样会使得调试变得异常困难。

从同一文件中导出和导入多个组件 | Exporting and importing multiple components from the same file

What if you want to show just one Profile instead of a gallery? You can export the Profile component, too. But Gallery.js already has a default export, and you can’t have two default exports. You could create a new file with a default export, or you could add a named export for Profile. A file can only have one default export, but it can have numerous named exports! 如果你只想展示一个 Profile 组，而不展示整个图集。你也可以导出 Profile 组件。但 Gallery.js 中已包含 默认 导出，此时，你不能定义 两个 默认导出。但你可以将其在新文件中进行默认导出，或者将 Profile 进行 具名 导出。同一文件中，有且仅有一个默认导出，但可以有多个具名导出！

First, export Profile from Gallery.js using a named export (no default keyword): 首先，用具名导出的方式，将 Profile 组件从 Gallery.js 导出（不使用 default 关键字）：

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

Then, import Profile from Gallery.js to App.js using a named import (with the curly braces): 接着，用具名导入的方式，从 Gallery.js 文件中 导入 Profile 组件（用大括号）:

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

Finally, render <Profile /> from the App component: 最后，在 App 组件里 渲染 <Profile />：

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

Now Gallery.js contains two exports: a default Gallery export, and a named Profile export. App.js imports both of them. Try editing <Profile /> to <Gallery /> and back in this example: 现在，Gallery.js 包含两个导出：一个是默认导出的 Gallery，另一个是具名导出的 Profile。App.js 中均导入了这两个组件。尝试将 <Profile /> 改成 <Gallery />，回到示例中：

Now you’re using a mix of default and named exports: 示例中混合使用了默认导出和具名导出：

• Gallery.js:
  • Exports the Profile component as a named export called Profile.
  • 使用 具名导出 的方式，将 Profile 组件导出，并取名为 Profile。
  • Exports the Gallery component as a default export.
  • 使用 默认导出 的方式，将 Gallery 组件导出。
• App.js:
  • Imports Profile as a named import called Profile from Gallery.js.
  • 使用 具名导入 的方式，从 Gallery.js 中导入 Profile 组件，并取名为 Profile。
  • Imports Gallery as a default import from Gallery.js.
  • 使用 默认导入 的方式，从 Gallery.js 中导入 Gallery 组件。
  • Exports the root App component as a default export.
  • 使用 默认导出 的方式，将根组件 App 导出。