包装（增强）一个第三方 react 组件怎么就那么麻烦？

// Button.tsx
export interface ButtonProps {
  // ...
}
const Button: React.FC<ButtonProps> = props => {
  return <button {...props} />
}
export default Button

// EnhancedButton.tsx
export interface EnhancedButtonProps extends ButtonProps {
  color?: string
}
const EnhancedButton: React.FC<EnhancedButtonProps> = props => {
  const { color = '#fff', ...rest } = props
  return <Button style={{ background: color }} {...rest} />
}
export default EnhancedButton

// 使用方式
<Button color="blue">确定</Button>

// Button.tsx
export interface ButtonProps {
  // ...
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  return <button {...props} />
})
export default Button

// EnhancedButton.tsx
export interface EnhancedButtonProps extends ButtonProps {
  color?: string
}
const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButtonProps>((props, ref) => {
  const { color = '#fff', ...rest } = props
  return <Button style={{ background: color }} ref={ref} {...rest} />
})
export default EnhancedButton

<Input />
<Input.Password />
<Input.TextArea />

const Input = () => {}
const Password = () => {}
const TextArea = () => {}
Input['Password'] = Password
Input['TextArea'] = TextArea

// Button.tsx
export interface ButtonProps {
  // ...
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  return <button {...props} />
})
export interface GroupProps {
  // ...
}
const Group: React.FC<GroupProps> = props => {
  // ...
}
Button['Group'] = Group
// 使用方式
// <Button.Group>
//   <Button>A</Button>
//   <Button>B</Button>
// </Button.Group>
export default Button

// EnhancedButton.tsx
export interface EnhancedButtonProps extends ButtonProps {
  color?: string
}
const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButtonProps>((props, ref) => {
  const { color = '#fff', ...rest } = props
  return <Button style={{ background: color }} ref={ref} {...rest} />
})
// forwardRef 包裹的组件不要通过 Object.assign 进行属性合并 ，因为 forwardRef 返回的是一个包含 render 函数的对象，
// 所以我们的 Button 和 EnhancedButton 组件其实都是一个对象，其中都包含了一个 render 函数，如果使用 Object.assign，
// 可能会导致渲染错误，甚至是死循环，因为它错误的将一个组件的 render 合并到了另一个组件身上
export default {
  ...Button,
  ...EnhancedButton,
}

import React, { forwardRef, useEffect } from 'react'
import type { SelectProps } from 'antd'
import { Select } from 'antd'
import { useControllableValue } from 'ahooks'
import { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select'
import { BaseSelectRef } from 'rc-select'

export interface EnhancedSelectProps<
  ValueType = any,
  OptionType extends BaseOptionType = DefaultOptionType,
> extends SelectProps<ValueType, OptionType> {
  /**
   * 接受一个 Promise，reject 时不会触发 value 变更，用于选择某个项后弹出一个弹窗提醒是否继续的场景
   */
  beforeChange?: () => Promise<void>
  /**
   * 如果 value 不可用，自动选择第一项（仅接受传入 options 的使用方式）
   * 不可用表示未传入 value 或者 value 未能匹配到 option，或者说匹配到了 value，但是 options 被设置了 disable 为 true
   */
  autoSelectFirst?: boolean
}

const EnhancedSelect = forwardRef<any, EnhancedSelectProps>((props, ref) => {
  const { onChange, options, beforeChange, autoSelectFirst = false, ...restProps } = props
  const [value, setValue] = useControllableValue<EnhancedSelectProps['value']>(props)

  useEffect(() => {
    if (
      !autoSelectFirst ||
      !options?.length ||
      // 如果当前的 value 匹配了任何 option 且该 option 未被禁用，则不需要自动选择第一个
      options.some(opt => opt.value === value && !opt.disabled)
    ) {
      return
    }
    const firstAvailableOption = options.find(opt => !opt.disabled)
    if (firstAvailableOption) {
      setValue(firstAvailableOption.value)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options, autoSelectFirst, value])

  async function handleChange(ev) {
    let shouldTrigger = true

    if (beforeChange) {
      try {
        await beforeChange()
      } catch (e) {
        shouldTrigger = false
      }
    }

    if (shouldTrigger) {
      setValue(ev)
    }
  }

  return <Select ref={ref} {...restProps} value={value} options={options} onChange={handleChange} />
})

declare const MySelect: (<
  ValueType = any,
  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
>(
  props: EnhancedSelectProps<ValueType, OptionType> & {
    children?: React.ReactNode
  } & { ref?: React.Ref<BaseSelectRef> },
) => React.ReactElement) & {
  SECRET_COMBOBOX_MODE_DO_NOT_USE: typeof Select['SECRET_COMBOBOX_MODE_DO_NOT_USE']
  Option: typeof Select['Option']
  OptGroup: typeof Select['OptGroup']
}

export default {
  ...Select,
  ...EnhancedSelect,
} as unknown as typeof MySelect