美文网首页
react 封装antd组件 props透传ts类型处理: Re

react 封装antd组件 props透传ts类型处理: Re

作者: RickyWu585 | 来源:发表于2022-06-05 18:53 被阅读0次
    import React, { FC } from "react";
    import { Raw } from "../types";
    import { Select } from "antd";
    
    type SelectProps = React.ComponentProps<typeof Select>
    
    interface IdSelectProps extends Omit<SelectProps, "value" | "onChange" | "options"> {
      value: Raw | null | undefined;
      onChange: (value?: number) => void;
      defaultOptionName?: string;
      options?: { name: string, id: number }[];
    }
    
    export const IdSelect: FC<IdSelectProps> = (
      { value, onChange, defaultOptionName, options,...restProps }) => {
      return <Select
        {...restProps}
        onChange={value => onChange(toNumber(value) || undefined)}
        value={toNumber(value)}>
        {
          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>;
    
    };
    
    const toNumber = (value: unknown) => isNaN(Number(value)) ? 0 : Number(value);
    
    

    相关文章

      网友评论

          本文标题:react 封装antd组件 props透传ts类型处理: Re

          本文链接:https://www.haomeiwen.com/subject/ocgjmrtx.html