简体中文

编写 UI 组件

上一章节中，我们学习了如何初始化项目，并使用配置修改 Modern.js 的默认行为。

这一章节中，我们继续沿用上一章节的项目代码，继续完善联系人列表。

为了做更好的 UI 展示和交互，我们引入组件库 Antd 来开发，使用 <List> 组件来代替原始的列表。先添加依赖：

npm

yarn

pnpm

bun

npm add antd

修改 src/routes/page.tsx，在顶部导入组件：

import { List } from 'antd';

修改 <App> 组件的实现：

function App() {
  return (
    <div>
      <List
        dataSource={mockData}
        renderItem={({ name, email, avatar }) => (
          <List.Item key={name}>
            <List.Item.Meta
              avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
              title={name}
              description={email}
            />
          </List.Item>
        )}
      />
    </div>
  );
}

执行 pnpm run dev，查看运行结果：

result

可以看到 Ant Design 导出的组件，已经具备了完整的样式。

INFO

Modern.js 会自动按需导入 Ant Design 组件需要的 CSS。

NOTE

我们也可以使用其他组件库来实现同样的功能，例如 Arco Design。

编写 UI 组件#

编写 UI 组件