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

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

如果你只想展示一个 Profile 组，而不展示整个图集。你也可以导出 Profile 组件。但 Gallery.js 中已包含 默认 导出，此时，你不能定义 两个 默认导出。但你可以将其在新文件中进行默认导出，或者将 Profile 进行 具名 导出。同一文件中，有且仅有一个默认导出，但可以有多个具名导出！

首先，用具名导出的方式，将 Profile 组件从 Gallery.js 导出（不使用 default 关键字）：

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

接着，用具名导入的方式，从 Gallery.js 文件中 导入 Profile 组件（用大括号）:

import { Profile } from './Gallery.js';
最后，在 App 组件里 渲染 <Profile />：
export default function App() {
return <Profile />;
}

现在，Gallery.js 包含两个导出：一个是默认导出的 Gallery，另一个是具名导出的 Profile。App.js 中均导入了这两个组件。尝试将 <Profile /> 改成 <Gallery />，回到示例中：

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

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}
 
export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

示例中混合使用了默认导出和具名导出：

• Gallery.js:

• 使用 具名导出 的方式，将 Profile 组件导出，并取名为 Profile。
• 使用 默认导出 的方式，将 Gallery 组件导出。

• App.js:

• 使用 具名导入 的方式，从 Gallery.js 中导入 Profile 组件，并取名为 Profile。
• 使用 默认导入 的方式，从 Gallery.js 中导入 Gallery 组件。
• 使用 默认导出 的方式，将根组件 App 导出。