文章目录
- 前言
- Export组件
-
- [1. 功能分析](#1. 功能分析)
- [2. 代码+详细注释](#2. 代码+详细注释)
- [3. 使用方式](#3. 使用方式)
- [4. 效果展示](#4. 效果展示)
- 总结
前言
今天我们来封装一个带导出图标的导出组件。
Export组件
1. 功能分析
通过传入链接地址,规定要跳转的导出页面,或是直接通过链接导出数据
2. 代码+详细注释
c
// @/components/Export/index.tsx
import { useTranslation } from 'react-i18next'
import { Link } from '@/components/Link'
import styles from './styles.module.scss'
import { ReactComponent as ExportIcon } from './export.svg'
/**
* 导出按钮组件
* @param {Object} props - 组件属性
* @param {string} props.link - 导出链接
* @returns {JSX.Element} - 导出按钮
*/
export function Export({ link }: { link: string }) {
const [t] = useTranslation()
return (
<Link className={styles.exportLink} to={link} target="_blank">
{/* 按钮文本 */}
<div>{t(`common.export`)}</div>
{/* 导出图标 */}
<ExportIcon />
</Link>
)
}
------------------------------------------------------------------------------
// @/components/Export/styles.module.scss
.exportLink {
height: 50px;
display: flex;
align-items: center;
color: var(--cd-primary-color);
cursor: pointer;
> div:first-child {
margin-right: 8px;
white-space: nowrap;
}
}
3. 使用方式
c
// 引入组件
import Export from '@/components/Export'
// 使用
<Export link="/export?module=tranction" />
4. 效果展示
总结
下一篇讲【全局常用组件Echarts封装】。关注本栏目,将实时更新。