Как с помощью TypeScript в React компоненте описать входящие props, если жду разные? (в зависимости от props.type: "bigCard" | "smallCard" )
ПрограммированиеНаписание кода+4
ЭдуардРазработка на JavaScript
· 2,4 K
Для описания входящих props в React компоненте, которые могут иметь разные типы в зависимости от значения props.type, используйте TypeScript и перечисление типов (union types). Вот пример кода:
interface BigCardProps {
type: "bigCard";
title: string;
description: string;
imageUrl: string;
}
interface SmallCardProps {
type: "smallCard";
title: string;
imageUrl: string;
}
type CardProps = BigCardProps | SmallCardProps;
const Card = (props: CardProps) => {
if (props.type === "bigCard") {
return (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
<img src={props.imageUrl} alt={props.title} />
</div>
);
} else {
return (
<div>
<h1>{props.title}</h1>
<img src={props.imageUrl} alt={props.title} />
</div>
);
}
};
В этом примере мы используем интерфейсы
BigCardProps и
SmallCardPropsчтобы определить входящие props для каждого типа карточки. Затем мы объединяем их с помощью перечисления типов
CardPropsкоторый может принимать либо
BigCardPropsлибо
SmallCardPropsВнутри компонента
Card мы используем условный оператор
if для проверки типа props. Если props имеет тип
"bigCard"мы отображаем соответствующий HTML для большой карточки, а если props имеет тип
"smallCard"мы отображаем соответствующий HTML для маленькой карточки.
Таким образом, мы можем описать входящие props для React компонента, который может иметь разные типы в зависимости от значения props.type, с помощью TypeScript и перечисления типов (union types).
1 эксперт согласен
Вам нужно сделать два разных интерфейса под каждый вариант. При этом поле type будет иметь не тип string, а конкретно "bigCard" в одном случае и "smallCard" в другом. Пример:
interface BigCard {
type: 'bigCard';
bigCardProp: string;
}
interface SmallCard {
type: 'smallCard';
smallCardProp: number;
}
При этом на стороне потребителя входной параметр типизируется... Читать далее
1 эксперт согласен
В TypeScript для описания входящих props с разными типами можно использовать условные типы. Например, для React компонента, который ожидает пропсы type с типом "bigCard" или "smallCard", можно использовать следующий код:
type Props = {
type: 'bigCard' | 'smallCard';
// общие пропсы для обоих типов карточек
title: string;
imageUrl: string;
// пропсы для... Читать далее
Заработать пару сотен рублей онлайн на Яндекс✺Толока! Регистрируйся.
Перейти на toloka.yandex.ru/promo