【默认值 HOC】增加默认值 HOC

[dream2023]

增加默认值 HOC

需求说明

在我们日常开发中，有些组件的属性在整个项目中都是相同的，例如上传组件的上传地址。为了减少复制粘贴的次数，一般都会在原组件的基础上进行一层简单的封装，默认值 HOC 就是专门为了解决这个问题的通用型 HOC 组件包裹。

使用说明

// 我们以 Upload 和 Button 为例，实际可以使任意组件
import { Upload, Button } from 'antd'
import { withDefaultProps  }  from 'super-antd'

const MyUpload = withDefaultProps(Upload, { action: 'https://foo.com', method: 'PUT' }) // 拥有了 `action` 和 `method` 默认值
const MyButton = withDefaultProps(Button, { type: 'primary' }) // 拥有了  `type` 默认值

const App = () => {
  // 此时应该显示 primary 主题色
  return <MyButton>hello world</MyButton>
}

API

const ComponentWithDefaultProps = withDefaultProps<T extends object = any>(
  Component: React.ComponentType<T>,
  props: T
);

params

参数	说明	类型	默认值
component	React 组件	React.ComponentType	-
props	此组件的属性	object	-

结果验收

• 代码实现
• 文档书写
• 单元测试