导入和导出组件

组件的魔力在于它们的可重用性：你可以创建由其他组件组成的组件。但是，随着你嵌套越来越多的组件，将它们拆分到不同的文件中非常有意义。这样可以让你保持文件易于扫描，并在更多地方重用组件。

你将学到：

• 什么是根组件文件

• 如何导入和导出组件

• 何时使用默认和命名导入和导出

• 如何从一个文件中导入和导出多个组件

• 如何将组件拆分为多个文件

1.根组件文件

在“你的第一个组件”中，创建了一个名为“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，则每个页面的根组件将不同。

2.导出和导入组件

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

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

• 从该文件中导出你的函数组件（使用默认或命名导出）。

• 在将使用该组件的文件中导入它（使用默认或命名导入的相应技术）。

在这里，Profile和Gallery已经从App.js移动到名为Gallery.js的新文件中。现在，你可以更改App.js以从Gallery.js导入Gallery：

// App.js
import Gallery from './Gallery.js';

export default function App() {
  return (
    <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>
  );
}

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

2.1.Gallery.js：

• 定义了Profile组件，该组件仅在同一文件中使用且未导出。

• 将Gallery组件作为默认导出进行导出。

2.2.App.js：

• 从Gallery.js导入默认导入Gallery。

• 将根App组件作为默认导出进行导出。

💡 注意 你可能会遇到省略了.js文件扩展名的文件，如下所示：import Gallery from './Gallery'; './Gallery.js'或'./Gallery'都可以与React一起使用，尽管前者更接近原生ES模块的工作方式。

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

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

💡 注意 为了减少默认和命名导出之间的潜在混淆，一些团队选择只坚持一种风格（默认或命名），或避免在单个文件中混合它们。选择最适合你的方式！

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

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

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

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

最后，在App组件中呈现：

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

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

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

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

// 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>
  );
}

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

3.1Gallery.js:

• 将Profile组件作为名为Profile的命名导出进行导出。

• 将Gallery组件作为默认导出进行导出。

3.2App.js:

• 将Profile作为名为Profile的命名导入从Gallery.js进行导入。

• 将Gallery作为默认导入从Gallery.js进行导入。

• 将根组件App作为默认导出进行导出。

4.总结

在本页中，你学习了：

• 什么是根组件文件

• 如何导入和导出组件

• 何时以及如何使用默认导入和导出以及命名导入和导出

• 如何从同一文件中导出多个组件