rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
93 lines (69 loc) • 2.41 kB
Markdown
---
title: 使用独立开源组件
---
上一小节我们使用 Ant Design 组件库中的组件来实现列表。
这一小节我们用独立开源组件来实现联系人的操作按钮。
以按钮库 [Ladda](https://lab.hakim.se/ladda/) 的 [React 实现](https://www.npmjs.com/package/react-ladda) 为例，先添加依赖：
```bash
pnpm add react-ladda ladda
```
在 `src/App.tsx` 里导入组件，同时手动导入需要的 CSS：
```ts
import LaddaButton, { S, SLIDE_UP } from 'react-ladda';
import 'ladda/dist/ladda.min.css';
```
修改 `List.Item` 组件的调用代码，添加 actions：
```ts
<List.Item
key={name}
actions={[
<LaddaButton
key={email}
loading={false}
data-size={S}
data-style={SLIDE_UP}
data-spinner-size={20}
data-spinner-color="#ddd"
data-spinner-lines={8}>
Call
</LaddaButton>
]}>
<List.Item.Meta
avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
title={name}
description={email}
/>
</List.Item>
```
`react-ladda` 组件库没有提供 types 文件，我们添加一个 `.d.ts` 文件：
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="macOS" label="macOS" default>
```bash
touch src/modern-app-env.d.ts
```
</TabItem>
<TabItem value="Windows" label="Windows">
```bash
ni src/modern-app-env.d.ts
```
</TabItem>
</Tabs>
在 `modern-app-env.d.ts` 中添加模块定义：
```ts
declare module 'react-ladda' {
const LaddaButton: any;
export default LaddaButton;
export const S: any;
export const SLIDE_UP: any;
}
```
执行 `pnpm run dev`，查看运行结果：
:::note 注
CSS 文件会自动经过 [postcss-preset-env](https://preset-env.cssdb.org/features)、[autoprefixer](https://github.com/postcss/autoprefixer) 等主流 PostCSS 项目的处理，不用担心平台兼容性问题（如果有特殊兼容需求可以调整 [browserslist](/docs/guides/tutorials/c04-es6-plus-and-ts/4.3-compatibility) 配置）
也支持导入 Scss、Less 文件。有的组件使用 CSS in JS，不需要额外导入样式文件，下一节会有相关介绍。
:::
---
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c05/hello-modern-2)。