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 фев 2023 в 8:39
  • 2
    Вы не видите код в текстовом формате? 16 фев 2023 в 8:43
  • 1
    В вопросе представлен как код, так и скриншот. Что вас не устраивает то? 16 фев 2023 в 8:55
  • 1
    Вообще нифига не понял. минимальный воспроизводимый пример делай.
    – Qwertiy
    23 мар 2023 в 19:32
  • 1
    @Qwertiy, добавил ссылку на CodeSandbox. 23 мар 2023 в 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 мар 2023 в 21:56

Ваш ответ

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

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