---

前言

今天我們來封裝一個帶導出圖標的導出組件。

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封裝】。關注本欄目，將實時更新。