技術標籤：React

目錄

• 前言
• 一、需求分析
• 二、實現細節
• • • 2.1 新加的功能
    • 2.2 增強的方法
    • 2.3 最終的元件
• 總結

前言

最近開始學習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給了前端很多抽象以及封裝的功能，如果多加以利用，可以使得程式碼複用性變得更好。對於需要增強元件的方法可以讓元件更加符合需求