---

前言

今天我们来封装一个带导出图标的导出组件。

Export组件

1. 功能分析

通过传入链接地址，规定要跳转的导出页面，或是直接通过链接导出数据

2. 代码+详细注释

// @/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. 使用方式

// 引入组件
import Export from '@/components/Export'
// 使用
<Export link="/export?module=tranction" />

4. 效果展示

---

总结

下一篇讲【全局常用组件Echarts封装】。关注本栏目，将实时更新。