包含组件、TS 类型定义、hooks、前端脚本等的 React 开发集合
- Message 消息提示组件(完全兼容 antd message 组件)
适用场景:每个类型的消息每次只允许展示一个,如果当一个消息提示的显示且并未消失时,其他消息提示默认不展示
使用方式:
import { message } from 'antd'
import { messageApi } from 'wbd-frontend-kit'
const singletonMessage = messageApi(message)
singletonMessage.success({ content: 'success' })
singletonMessage.info('info')
singletonMessage.reset()
singletonMessage.error('error happend!')
- usePagination 用于分页 使用方式:
import { usePagination, useNoRenderPagination } from 'wbd-frontend-kit'
// handleChange, handleShowSizeChange, reset 会触发组件更新
const [page, size, handleChange, handleShowSizeChange, reset] = usePagination({
page: 1,
size: 10,
})
// setPage不会触发组件更新,适用于手动更新的方式
const [pageOptions, setPage] = useNoRenderPagination({ page: 1, size: 10 })
- useQueryParams 获取查询参数 使用方式:
import { useQueryParam, useQueryParams } from 'wbd-frontend-kit'
// 获取单个参数
const name = useQueryParam(location.search, 'name')
// 获取所有参数
const params = useQueryParams(location.search)
- useToggleState true/false 状态切换 使用方式:
import { useToggleState } from 'wbd-frontend-kit'
const [state, toggleState] = useToggleState(false)
toggleState()
-
execFunction(func, ...params)
用于执行函数的函数,常用于执行callback
import { execFunction } from 'wbd-frontend-kit'
execFunction(func)
-
exportFile(url, params)
下载远程文件
import { exportFile } from 'wbd-frontend-kit'
const sendData = { Authorization: this.state.Authorization, type: 'all' }
exportFile('/api/admin/platform/downloadReceiptProfitTemplate.xls', sendData)
-
importAll(ctx: __WebpackModuleApi.RequireContext, isArray?: boolean, formatkey?: (key: string) => string)
批量导出模块
importAll
函数用于批量导出模块,ctx
函数为require.context
的context
实例,isArray
表示导出类型是否是数组,formatKey
表示在导出为对象的情况下,自定义key
。
importAll
函数依赖require.context
,详情见require.context的使用。注意:本函数只在使用Webpack
构建的项目中生效。
例如如果要导出pages/
目录下所有的model.ts
,可以是如下的写法:
import { importAll } from 'wbd-frontend-kit'
// 1. 导出为对象,使用默认的key生成规则
export default importAll(require.context('./pages/', true, /.*model\.ts$/))
// 2. 导出为对象,使用自定义key规则(加上前缀)
export default importAll(require.context('./pages/', true, /.*model\.ts$/), false, (key) => `prefix-${key}`)
// 3. 导出为数组
export default importAll(require.context('./pages/', true, /.*model\.ts$/), true)
-
warning(content)
,warningOnce(content)
开发模式下控制台警告
import { warn } from 'wbd-frontend-kit
warn.warning('warning there')
warn.warningOnce('warning once')
warn.resetWarned()
warn.warningOnce('warning once')
其余工具函数见es/utils
本项目包含的所有脚本均可以通过
wbd-scripts [command] [<params>]
的方式运行,全局安装yarn global add wbd-frontend-kit
后直接使用该命令或本地安装后在package.json
中的scripts
对象中添加{"commandxx": "wbd-scripts"}
,然后使用通过yarn commandxx commandName
的运行脚本。
Usage: wbd-scripts [command] [<params>]
[command]
将要运行的命令名称,例如 wbd-scripts module
<params>
该命令需要的参数(可选),例如:wbd-scripts init ts dva 表示初始化时使用ts和dva
支持的命令
- module:
yarn wbd-scripts module
使用该命令创建一个新的模块,该模块包含了pages/routes/models
三个部分。第一次运行命令会生成配置文件模板,修改模板后第二次运行本命令可生成一个新的模块。注:该命令生成的模块只适用于b2b
模板的项目。注意:1.0.7 版本后只支持
web-templates
模板,使用b2b
模板的项目请使用 1.0.6 及以下版本