Я пытаюсь расширить компонент Select ant-design. Компонент можно использовать следующим образом:
<Select<number>>
...
</Select>
Теперь я хочу создать пользовательский компонент-оболочку, но мне очень сложно понять общую вложенность.
const BMSelect: React.FC<SelectProps<???>> = ({children, ...props}) => {
return <Select<???> {...props}>
{children}
</Select>
}
Как я могу расширить этот выбор с помощью машинописного текста?
Ant-design предоставляет следующие интерфейсы/реквизиты:
import * as React from 'react';
import { Option, OptGroup, SelectProps as RcSelectProps } from 'rc-select';
import { OptionProps } from 'rc-select/lib/Option';
import { SizeType } from '../config-provider/SizeContext';
declare type RawValue = string | number;
export { OptionProps };
export declare type OptionType = typeof Option;
export interface LabeledValue {
key?: string;
value: RawValue;
label: React.ReactNode;
}
export declare type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
suffixIcon?: React.ReactNode;
size?: SizeType;
mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
bordered?: boolean;
}
export interface SelectProps<VT> extends Omit<InternalSelectProps<VT>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
mode?: 'multiple' | 'tags';
}
export interface RefSelectProps {
focus: () => void;
blur: () => void;
}
declare const SelectRef: <VT extends SelectValue = SelectValue>(props: SelectProps<VT> & {
ref?: ((instance: RefSelectProps | null) => void) | React.RefObject<RefSelectProps> | null | undefined;
}) => React.ReactElement;
declare type InternalSelectType = typeof SelectRef;
interface SelectInterface extends InternalSelectType {
SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
Option: typeof Option;
OptGroup: typeof OptGroup;
}
declare const Select: SelectInterface;
export default Select;
Ваш компонент также должен принимать общий параметр, который он может передать расширяемому компоненту.
Я не знаю, как сослаться на общий параметр внутри функции, извне функции, но вы, безусловно, можете использовать определение функции и явно вводить реквизиты, а не использовать React.FC
.
function BMSelect<T>({ children, ...props }: SelectProps<T>) {
return (
<Select<T> {...props}>
{children}
</Select>
);
}
Если вы посмотрите на источник компонента выбора ant-design, вы увидите, что общий параметр, который он принимает, расширяется SelectValue
.
const InternalSelect = <VT extends SelectValue = SelectValue>(
Вам нужно будет применить то же ограничение к вашему T
, чтобы правильно расширить их компонент.
function BMSelect<T extends SelectValue>({ children, ...props }: SelectProps<T>) {
return (
<Select<T> {...props}>
{children}
</Select>
);
}
Принятый ответ работает, как ожидалось. Однако я хочу добавить сюда подход, основанный на стрелочной функции:
const BMSelect = <T extends SelectValue = SelectValue>({ children, ...props }: SelectProps<T>) => {
return (
<Select<T> {...props}>
{children}
</Select>
);
}