React + Typescript + Antd：封装通用的字典组件DXSelect

import React from 'react';
import { Select } from 'antd';
import { Dictionary } from '@/types/global';
 
interface DXSelectProps<T> {
  dataSource: Dictionary<T>;
  value?: T;
  onChange?: (value: T) => void;
}
 
function DXSelect<T>({ dataSource, value, onChange }: DXSelectProps<T>) {
  const options = Object.entries(dataSource).map(([key, item]) => (
    <Select.Option key={key} value={item}>
      {key}
    </Select.Option>
  ));
 
  return (
    <Select value={value} onChange={onChange} placeholder="请选择">
      {options}
    </Select>
  );
}
 
export default DXSelect;

这段代码定义了一个泛型组件DXSelect，它接受一个泛型T作为选项值的类型，并且使用了Ant Design的Select组件来渲染一个下拉选择框。该组件可以接受一个字典对象作为数据源，并允许用户选择其中的条目。当选项变化时，它会调用提供的onChange回调函数。这个组件可以用于任何需要从固定数据集中进行选择的场景。