Antd的Select组件二次封装

news2024/10/7 14:31:54

提示：Select组件二次封装的目的,是为了在系统里面更方便、简洁地使用Select

这是官方写的使用方法是:

import React from 'react';
import { Select } from 'antd';

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const App: React.FC = () => (
  <>
    <Select
      defaultValue="lucy"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled', disabled: true },
      ]}
    />
  </>
);

export default App;

如果是在一个复杂的应用中，会有很多地方都会使用到Select组件的，而且每一个场景不同，需要设置不同的参数。

这样似乎很繁琐。现在需要对Select进行二次封装，符合自己的应用场景。

封装后的组件，只需要传入一个属性：config。

二次封装的组件命名为：DXSelect。

DXSelect组件默认设置一个宽度，放在style属性里面。例如： styles = { width: "200px" }，

config属性包含了一下属性：

options：定义select的选项，作为必填参数；

styles：样式，便于修改样式。

otherProps：其他属性，作为组件的扩展属性吧，在不同场景中，需要设置不同的参数，除了styles和options，其他属性都放在otherProps里面。

现在先定义一下属性的数据类型，这样严谨一点：

interface optionItem {
    itemKey?: string,
    itemValue?: string
}
interface ConfigProps {
    options: optionItem[],// 下拉框选项
    styles?: object, // 宽度
    otherProps?: object, // 其他属性
}
interface Props {
    config: ConfigProps
}

组件代码为：

const DXSelect: React.FC<Props> = ({ config }) => {
    const { styles = { width: "200px" }, options, otherProps } = config
    return <Select style={styles} {...otherProps}>
        {
            options.map((item: any) => <Select.Option value={item.itemKey}>{item.itemValue}</Select.Option>)
        }
    </Select>
}

这样引入该组件：<DXSelect config={defaultConfig} />，

defaultConfig定义为：

  const defaultConfig = {
    options: [
      { itemKey: "123", itemValue: "test" },
      { itemKey: "124", itemValue: "test4" }
    ],
  }

效果如图：
在这里插入图片描述
现在修改一下样式，就在styles属性添加新的样式，比如：

  const defaultConfig = {
    options: [
      { itemKey: "123", itemValue: "test" },
      { itemKey: "124", itemValue: "test4" }
    ],
    styles:{
      width:"100px"
    }
  }

修改的效果如下图：
在这里插入图片描述
其他的参数设置如下：

  const defaultConfig = {
    options: [
      { itemKey: "123", itemValue: "test" },
      { itemKey: "124", itemValue: "test4" }
    ],
    styles: {
      width: "100px"
    },
    otherProps: {
      allowClear: true,
      onChange: (value: string, option: any,) => {
        console.log("value", value, option)
      }
    }
  }