0

Имеется такой компонент:

import { forwardRef, Ref } from "react";

export interface ICelebrationScreenProps
{
    title: string;
    [ prop: string ]: any;
}

function CelebrationScreen({ title, ...props }: ICelebrationScreenProps, ref: Ref<HTMLDivElement>)
{
    return (<>{title}</>);
};

export default forwardRef(CelebrationScreen);

Когда я пытаюсь использовать данный компонент в другом файле, VSCode мне не дает подсказок и ошибок о пропсах.

введите сюда описание изображения


Если же я буду использовать компонент без forwardRef, допустим таким способом, то я получу необходимые мне ошибки:

import { forwardRef, Ref } from "react";

export interface ICelebrationScreenProps
{
    title: string;
    [ prop: string ]: any;
}

function CelebrationScreen({ title, ...props }: ICelebrationScreenProps, ref: Ref<HTMLDivElement>)
{
    return (<>{title}</>);
};

export default forwardRef(CelebrationScreen);

function Test()
{
    return <CelebrationScreen />
}

Свойство "title" отсутствует в типе "{}" и является обязательным в типе "ICelebrationScreenProps". ts(2741)

Вы также можете увидеть это поведение на

Edit wonderful-rubin-lvnwpr

16
  • Вы интересные люди, ставите минус не обосновав его. Что вам вечно не нравится? Код есть, скриншоты есть.. 16 фев в 8:39
  • 2
    Вы не видите код в текстовом формате? 16 фев в 8:43
  • 1
    В вопросе представлен как код, так и скриншот. Что вас не устраивает то? 16 фев в 8:55
  • 1
    Вообще нифига не понял. минимальный воспроизводимый пример делай.
    – Qwertiy
    23 мар в 19:32
  • 1
    @Qwertiy, добавил ссылку на CodeSandbox. 23 мар в 22:41

2 ответа 2

2

Для того чтобы наиболее гибко использовать типизацию можно завести определенный интерфейс ForwardRefExoticComponent (подробнее):

import { forwardRef, ReactElement, Ref, WeakValidationMap } from "react";

interface ForwardRefExoticComponent<P> {
  (props: P): ReactElement | null;
  readonly $$typeof: symbol;
  displayName?: string;
  defaultProps?: Partial<P>;
  propTypes?: WeakValidationMap<P>;
}

Сам интерфейс ForwardRefExoticComponent можно не прописывать, а импортировать из реакта.

import { ForwardRefExoticComponent } from "react";

Далее мы сможем использовать его подобным образом, типизируя под конкретные пропсы и получать подстветку ошибки в JSX:

const CelebrationScreenWithRef: ForwardRefExoticComponent<ICelebrationScreenProps> = forwardRef(
  CelebrationScreen
);
-1
// function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): 
// ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

const CelebrationScreen = forwardRef<HTMLDivElement, CelebrationScreenProps>(
({ title }, ref) => {
return (
    <div ref={ref}>{title}</div>
   );
  },
 );
1
  • 1
    Чем ваш ответ решает проблему? 3 мар в 21:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.