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);