9. 组件的导入导出

为什么需要导入导出

组件多了以后，全写在一个文件里会爆炸。你需要把组件拆到不同文件，通过 import/export 连接。

默认导出（Default Export）

一个文件只能有一个默认导出。

// Profile.jsx
export default function Profile() {
  return <img src="..." alt="..." />;
}

导入时可以随便命名：

// App.jsx
import Profile from './Profile.jsx';
// 也可以改名
import MyProfile from './Profile.jsx';

具名导出（Named Export）

一个文件可以有多个具名导出。

// components.jsx
export function Profile() {
  return <img src="..." alt="..." />;
}

export function Gallery() {
  return (
    <div>
      <Profile />
      <Profile />
    </div>
  );
}

export const theme = {
  color: 'blue',
};

导入时必须用相同的名字，用大括号：

import { Profile, Gallery } from './components.jsx';

两种导出的对比

维度	默认导出	具名导出
数量	一个文件只能有一个	可以有多个
导出语法	export default function	export function
导入语法	import Name from './file'	import { Name } from './file'
导入时命名	可以随便命名	必须和导出一致
适用场景	文件只有一个主组件	文件有多个组件或工具值

混合使用

一个文件可以同时有默认导出和具名导出：

// Gallery.jsx
export function Profile() {
  return <img src="..." alt="..." />;
}

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

导入时：

import Gallery from './Gallery.jsx';        // 默认导出
import { Profile } from './Gallery.jsx';    // 具名导出

// 也可以一起写
import Gallery, { Profile } from './Gallery.jsx';

实际项目中的文件组织

方案一：一个组件一个文件（推荐）

src/
├── components/
│   ├── Button.jsx
│   ├── Avatar.jsx
│   └── Card.jsx
└── App.jsx

每个文件默认导出一个组件：

// Button.jsx
export default function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

// App.jsx
import Button from './components/Button.jsx';
import Avatar from './components/Avatar.jsx';

方案二：相关组件放一个文件

src/
├── components/
│   └── Gallery.jsx   // 包含 Gallery 和 Profile
└── App.jsx

// Gallery.jsx
export function Profile() {
  return <img src="..." alt="..." />;
}

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

路径写法

// 相对路径
import Button from './components/Button.jsx';
import Header from '../Header.jsx';

// 当前目录
import utils from './utils.js';

// 上级目录
import config from '../config.js';

Vite 还支持 @ 别名指向 src 目录（需要配置）：

import Button from '@/components/Button.jsx';

动手试试

1. 创建 src/components/Profile.jsx：

export default function Profile() {
  return (
    <div className="profile">
      <h2>张三</h2>
      <p>前端开发工程师</p>
    </div>
  );
}

2. 修改 src/App.jsx：

import Profile from './components/Profile.jsx';

function App() {
  return (
    <div>
      <h1>用户列表</h1>
      <Profile />
      <Profile />
    </div>
  );
}

export default App;

保存后浏览器应该显示两个用户卡片。

本节小结

• export default：一个文件一个，导入时随便命名
• export：一个文件多个，导入时名字要对应
• 推荐一个组件一个文件
• 路径用 ./ 相对路径或 @/ 别名

下一节学条件渲染。