React - 封装antd的组件

很多情况下，antd已经可以满足大部分业务需求，但是有的时候，给组件的数据处理加了点东西，而且太多太多地方使用了这个组件，那么，为何不把antd的组件稍加封装，但是又不影响它原来的功能呢？

这里举一个案例，比如Select这个组件，里面的传值都是string类型，所以每次获取到值后，都需要Number去转化一下。为了省去这个麻烦，那么就定义一个IdSelect组件。

// 思考我们需要的属性有哪些，那么这些都需要定义出来，
//但是又要保留原有的属性和方法，所以又要 去获取它原来自带的，去继承就可以了。


// 先定义Select的所有属性
type SelectProps = React.ComponentProps<typeof Select>
type Raw = string | number
// 继承，并定义自定义的属性  为了保险，omit掉需要更改的类型。
type IdSelectProps extends Omit<SelectPorps, 'value' | 'onChange', 'options'> {
    value?: null | Raw | undefined;
    onChange: (value ?: number) => void;
    defaultOptionName?: string;
    options?: {name:string, id: number}[];
}

// IdSelect 组件
export const IdSelect = (props: IdSelectProps) => 
    // 获取调用时传输的props, 剩下的也解构出来
    const { value, onChange, defaultOptionName, options, ...restProps } = props

    <Select 
        value={options?.length ? toNumber(value) : 0}
        onChange={() => onChange?.(toNumber(value) || undefined) } 
        {...restProps}
    >
        {
            defaultOptionName ? 
            <Select.Option value={0}>{defaultOptionName}</Select.Option> : null
        }
        {
            options?.map(option => <Select.Option key={option.id} value={option.id}>
                {option.name}
            </Select.Option>) 
        }
    </Select>


// 定义 toNumber函数
const toNumber = (value : unknown) => isNaN(Number(value) + 1) ? 0 : Number(value)