Расширение универсального компонента Typescript React-FC (выбор Ant-Design)

Я пытаюсь расширить компонент 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
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Что такое компоненты React? Введение в компоненты | Типы компонентов
Что такое компоненты React? Введение в компоненты | Типы компонентов
Компонент - это независимый, многократно используемый фрагмент кода, который делит пользовательский интерфейс на более мелкие части. Например, если мы...
Введение в одну из самых важных концепций в React - функциональное программирование.
Введение в одну из самых важных концепций в React - функциональное программирование.
React разработан с использованием концепции функционального программирования, поэтому понимание функционального программирования важно для изучения...
Руководство спасателя React по созданию масштабируемых приложений
Руководство спасателя React по созданию масштабируемых приложений
А, React. Это одна из самых популярных библиотек JavaScript. Ее любят за гибкость, простоту использования и, будем честны, за то, что она позволяет...
0
0
2 814
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваш компонент также должен принимать общий параметр, который он может передать расширяемому компоненту.

Я не знаю, как сослаться на общий параметр внутри функции, извне функции, но вы, безусловно, можете использовать определение функции и явно вводить реквизиты, а не использовать 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>
    );
}

Другие вопросы по теме