世界上最好用的工具类

类的代码如下：

import { ReactElement, useContext } from 'react';
import { Select } from 'antd';
// 定义一个类
//使用索引签名来定义Template，这允许任何字符串作为键名
interface Item {
    [key: string]: any; // 这里假设每个键的值都是字符串
}
export default class UtilsClass {
    // 类的构造函数
    constructor() {}
    /**
     *
     * @param array 需要处理的数组
     * @param key 需要挑出来的数组指定的key
     * @returns
     */
    public useSelectArray(array: Item[], key: string): any {
        let selectOptionData = array.filter((item) => {
            return Object.keys(item).toString() === key;
        });
        return selectOptionData;
    }
    /**
     *
     * @param array 需要被排序的二维数组
     * @param arraySort 根据一维数组顺序排序且一位数组里的每个元素都属于array里的value
     * @param key 被排序数组里的key
     * @returns
     */
    public useSort(array: Item[], arraySort: string[], key: { label: string }) {
        // 创建一个映射，用于存储每个名称的索引，提高查找效率
        const indexMap = new Map<string, number>();
        arraySort.forEach((item, index) => {
            indexMap.set(item, index);
        });
        let keyIndex = key.label;
        array.sort((a: any, b: any) => {
            const aIndex = indexMap.get(a[keyIndex]) ?? Infinity; // 如果找不到，则赋值为Infinity
            const bIndex = indexMap.get(b[keyIndex]) ?? Infinity;
            return aIndex - bIndex;
        });
        return [array];
    }
    /**
     *
     * @param template 给option组件指定key
     * @returns 返回一个Con函数 在  <Select onChange={onChange}>{Con(am)}</Select>组件里调用
     */
    public useOption(template: string[]) {
        const Con = (value: Item[]): ReactElement => {
            // 由于template的确切键是不确定的，这里我们通过Object.values获取所有的值，然后按顺序使用
            const templateKeys = Object.values(template);

            if (templateKeys.length !== 2) {
                throw new Error('useOption需要传一个数组且里面包含两个key');
            }
            return (
                <>
                    {value.map((item, index) => {
                        return (
                            <Select.Option key={index} value={item[templateKeys[1]]}>
                                {item[templateKeys[0]]}
                            </Select.Option>
                        );
                    })}
                </>
            );
        };
        return Con;
    }
    /**
     * react跨级组件间传值
     * @param context context对象，保证多次调用拿到同一个对象
     * @param type 每次调用时的组件类型（父组件｜｜子组件）
     * @param initValue 祖先组件要传的值，必须是数组类型
     * @param component 祖先组件返回来的ReactElement
     * @returns
     */

    public useSendParams(
        context: React.Context<null>,
        type?: { type: string },
        initValue?: any[],
        component?: ReactElement
    ) {
        switch (type && type.type) {
            case 'father':
                return <context.Provider value={initValue}>{component}</context.Provider>;
                break;
            case 'son':
                let obj = useContext(context);
                return obj;
                break;
        }
    }
}

使用方法如下：

#### 应用场景

### useSelectArray()

应用场景：一般用于后端给你统一返回 Select 组件的多个 option 子组件
使用方法：

```tsx
const dataOption: any = [
    {
        name: [
            { name: 'jack', id: 0 },
            { name: 'lucy', id: 1 },
            { name: 'Yiminghe', id: 2 },
            { name: 'disabled', id: 3 }
        ]
    },
    {
        lily: [
            { name: 'tom', id: 0 },
            { name: 'sam', id: 1 },
            { name: 'gouya', id: 2 },
            { name: 'goulaoda', id: 3 }
        ]
    }
];
let res1 = myInstance.useSelectArray(dataOption, 'lily');
```

### useSort()

应用场景：给二维数组排序
使用方法：

```tsx
const data: any = [
    { name: '狗牙', age: 3, sex: '女', hobby: '踢足球' },
    { name: 'Silly', age: 2, sex: '女', hobby: '打篮球' },
    { name: '狗老大', age: 2, sex: '女', hobby: '打篮球' },
    { name: 'Tom', age: 2, sex: '女', hobby: '打篮球' },
    { name: 'Lily', age: 2, sex: '女', hobby: '打篮球' }
];
const arraySort: any = ['狗老大', '狗牙', 'Lily', 'Tom', 'Silly'];
const myInstance = new UtilsClass();
let res2 = myInstance.useSort(data, arraySort, { label: 'name' });
```

### useOption()

应用场景：给二维数组排序
使用方法：
返回一个 Con 函数 在 <Select onChange={onChange}>{Con(am)}</Select>组件里调用

```tsx
let am: any = [
    { label: 'xiaodu', id: 0 },
    { label: 'wang', id: 1 },
    { label: 'li', id: 2 },
    { label: 'laowang', id: 3 }
];
const Con = myInstance.useOption(['label', 'id']);
<Select onChange={onChange}>{Con(am)}</Select>;
```

### useSendParams()

应用场景：跨代组件之间传值
使用方法：

祖先组件使用方法：

```tsx
const myInstance = new UtilsClass();
const res3 = myInstance.useSendParams(
    context,
    { type: 'father' },
    [{ name: '1' }],
    <CircleProgress percent={40} color='#4CAF50' trackColor='#EEEEEE' size='120px' thickness={8} dur={0.01}>
        <h1>80分</h1>
    </CircleProgress>
);
```

子组件使用方法：

```tsx
const myInstance = new UtilsClass();
const res3 = myInstance.useSendParams(context, { type: 'son' });
```