网站搜索

reactjs - 在 react-select 中为 Option 对象扩展附加字段


我想在默认选项对象中添加额外的字段,我正在尝试实现带图标的下拉选择。我已经能够完全实现可用的选择组件,但在获取正确的 TypeScript 类型时遇到困难。

这是简化的例子。

export interface BaseItemProps {
    value: string;
    label: string;
}

interface IconDropdownItemProps extends BaseItemProps {
    iconCode: string;
}

const IconFieldOption = (props: OptionProps<IconDropdownItemProps, false>): ReactElement => {
    const { data } = props;
    return (
        <components.Option {...props}>
            <IconField {...data} />
        </components.Option>
    );
};



const IconDropdown = (props: Omit<SelectProps, 'components'>,): ReactElement => {
    const { defaultLocale } = props;

    return (
        <Dropdown
            {...props}
            options={SupportedLanguages}
            components={{ Option: IconField }}
        />
    );
};

我遇到的错误是:

类型 '(props: OptionProps) => ReactElement' 不能赋值给类型 'ComponentType>> | undefined'。

在类型 '{ label: string; value: string; }' 中缺少属性 'iconCode',但在类型 'IconDropdownItemProps' 中是必需的

我应该如何扩展这个?