React的组件封装

前言

最近开始学习React，跟着Nolan老师开发Jira，有很多干货，这里分享一个组件封装的方法。

一、需求分析

在antd的Select组件中，

• value 可以传入多种类型的值
• onChange只会回调 number|undefined 类型
• 当 isNaN(Number(value)) 为true的时候，也就是vaule不能转换成number的时候，代表选择默认类型，就是string
• 当选择默认类型的时候，onChange会回调undefined

这个需求是因为在select组件中，我们希望把id转换成number的形式，满足接口

export interface User {
  id: number;
 }

二、实现细节

2.1 新加的功能

我们需要在IdSelect组件中传入value, defaultOptionName以及OnChange方法，其它保留原有antd的select提供的属性

interface IdSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
  value: string|number|null|undefined
  onChange: (value?: number) => void
  defaultOptionName?: string
  options?: {name: string; id: number}[]
}

2.2 增强的方法

vaule不能转换成number的时候，代表选择默认类型，onChange回调undefined

onChange={selectedValue=>onChange(toNumber(selectedValue) || undefined)}

const toNumber = (value: unknown) => (isNaN(Number(value)) ? 0 : Number(value));

2.3 最终的组件

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}[]
}

/**
 * value 可以传入多种类型的值
 * onChange只会回调 number|undefined 类型
 * 当 isNaN(Number(value)) 为true的时候，代表选择默认类型
 * 当选择默认类型的时候，onChange会回调undefined
 * @param props
 * @constructor
 */
export const IdSelect = (props: IdSelectProps) => {
  const {value, onChange, defaultOptionName, options, ...restProps} = props
  return(
    <Select
      value={toNumber(value)}
      onChange={selectedValue=>onChange(toNumber(selectedValue) || 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>
  )
};

const toNumber = (value: unknown) => (isNaN(

总结

React给了前端很多抽象以及封装的功能，如果多加以利用，可以使得代码复用性变得更好。对于需要增强组件的方法可以让组件更加符合需求