React封装CustomSelect组件思路详解

interface IProps extends XXX; type IProps = Omit & {...};

// types.ts import type { TooltipProps } from 'antd'; interface OptItem { id: string; name: string; disabled: boolean; // 是否不可选 children?: OptItem[]; // 递归嵌套 } // 组件调用的props传参 export type IProps = Omit & { /** 选项类型: 单选, 复选 */ type: 'radio' | 'checkbox'; /** 选项列表 */ options: OptItem[]; /** 展示文本 */ placeholder?: string; /** 触发行为 */ trigger?: 'click' | 'hover'; /** 受控组件: value + onChange 组合 */ value?: string[]; onChange?: (v: string[]) => void; /** 样式间隔 */ size?: number; }

import type { Dispatch, MutableRefObj, SetStateAction } from 'react'; import { createContext } from 'react'; import type { IProps } from './types'; export const Ctx = createContext<{ options: IProps['options']; size?: number; type: IProps['type']; onChange?: IProps['onChange']; value?: IProps['value']; // 这里有两个额外的状态: shadowValue表示内部的数据状态 shadowValue: string[]; setShadowValue?: Dispatch>; // 操作弹出框 setVisible?: (value: boolean) => void; // 复选框的引用, 暴露内部的reset方法 checkboxRef?: MutableRefObject<{ reset: () => void; } | null>; }>({ options: [], shadowValue: [], type: 'radio' });

// index.tsx /** * 自定义下拉选择框, 包括单选, 多选。 */ import { FilterOutlined } from '@ant-design/icons'; import { useBoolean } from 'ahooks'; import { Popover } from 'antd'; import classnames from 'classnames'; import { cloneDeep } from 'lodash'; import type { FC, ReactElement } from 'react'; import { memo, useEffect, useRef, useState } from 'react'; import { Ctx } from './config'; import Controls from './Controls'; import DispatchRender from './DispatchRender'; import Styles from './index.less'; import type { IProps } from './types'; const Index: FC = ({ type, options, placeholder = '筛选文本', trigger = 'click', value, onChange, size = 6, style, className, ...rest }): ReactElement => { // 弹窗显示控制(受控组件) const [visible, { set: setVisible }] = useBoolean(false); // checkbox专用, 用于获取暴露的reset方法 const checkboxRef = useRef<{ reset: () => void } | null>(null); // 内部维护的value, 不对外暴露. 统一为数组形式 const [shadowValue, setShadowValue] = useState([]); // value同步到中间状态 useEffect(() => { if (value && value?.length) { setShadowValue(cloneDeep(value)); } else { setShadowValue([]); } }, [value]); return (  { setVisible(vis); // 这里是理解难点: 如果通过点击空白处关闭了弹出框, 而不是点击确定关闭, 需要额外触发onChange, 更新数据。 if (vis === false && onChange) { onChange(shadowValue); } }} placement="bottom" trigger={trigger} content={ 
 {/* 分发自定义的子组件内容 */}  {/* 控制行 */} 
 } {...rest} >  {placeholder ?? '筛选文本'}  ); }; const CustomSelect = memo(Index); export { CustomSelect }; export type { IProps };

/** 控制按钮行: "重置", "确定" */ import { Button } from 'antd'; import { cloneDeep } from 'lodash'; import type { FC } from 'react'; import { useContext } from 'react'; import { Ctx } from './config'; import Styles from './index.less'; const Index: FC = () => { const { onChange, shadowValue, setShadowValue, checkboxRef, setVisible, value, type } = useContext(Ctx); return ( 
  { // radio: 直接重置为value if (type === 'radio') { if (value && value?.length) { setShadowValue?.(cloneDeep(value)); } else { setShadowValue?.([]); } } // checkbox: 因为还需要处理全选, 需要交给内部处理 if (type === 'checkbox') { checkboxRef?.current?.reset(); } }} > 重置  { if (onChange) { onChange(shadowValue); // 点击确定才触发onChange事件, 暴露内部数据给外层组件 } setVisible?.(false); // 关闭弹窗 }} > 确定 
 ); }; export default Index;

/** 分发详情的组件，保留其可拓展性 */ import type { FC, ReactElement } from 'react'; import CheckboxRender from './CheckboxRender'; import RadioRender from './RadioRender'; import type { IProps } from './types'; const Index: FC<{ type: IProps['type'] }> = ({ type }): ReactElement => { let res: ReactElement = <>; switch (type) { case 'radio': res = ; break; case 'checkbox': res = ; break; default: // never作用于分支的完整性检查 ((t) => { throw new Error(`Unexpected type: ${t}!`); })(type); } return res; }; export default Index;

import { Radio, Space } from 'antd'; import type { FC, ReactElement } from 'react'; import { memo, useContext } from 'react'; import { Ctx } from './config'; const Index: FC = (): ReactElement => { const { size, options, shadowValue, setShadowValue } = useContext(Ctx); return (  { // 更新数据 if (target.value) { setShadowValue?.([target.value]); } else { setShadowValue?.([]); } }} >  {options?.map((item) => (  {item.name}  ))}  ); }; export default memo(Index);