«Свойство не существует» в функциональном компоненте с добавленными функциональными компонентами в качестве свойств?

Я использую React с Typescript и функциональный подход.

const Divider: React.FunctionComponent<CardDividerProps> = (props: CardDividerProps) => (
   <div>
      divider
   </div>
);

const Card: React.FunctionComponent<CardProps> = (props: CardProps) => (
   <div>
      card
   </div>
);

Card.Divider = Divider; //Property 'Divider' does not exist on type 'FunctionComponent<CardProps>'.

Если я уберу явный тип с Карты, он сработает. Но я хочу указать это с помощью React.FunctionComponent... Возможно ли это?

Думаю, я могу создать тип:

type CardWithDividerComponent = {
    (props: CardProps): JSX.Element;
    defaultProps: CardProps;
    Divider: React.FunctionComponent<CardDividerProps>;
}

Но единственное ли это решение? Есть ли решение с React.FunctionComponent?


reactjs typescript react-functional-component react-typescript react-tsx
person Nikolai    schedule 28.07.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы сообщаете TypeScript, что Card — это функция типа React.FC. Этот тип не содержит никакого свойства Divider, поэтому TypeScript жалуется на это.

Чтобы решить эту проблему, вы должны сообщить TypeScript правильный тип вашего компонента, примерно так:

const Card: React.FunctionComponent<CardProps> & {Divider?: React.FunctionComponent<CardDividerProps>} = (props: CardProps) => (
   <div>
      card
   </div>
);

Card.Divider = Divider;
person Drag13    schedule 28.07.2020
comment
Спасибо за ответ. Я не знал, что мы можем добавлять свойства с помощью &. ООП TypeScript действительно интересен, он чуть ли не более гибкий, чем C#, где у меня есть опыт. - person Nikolai; 28.07.2020
comment
У меня есть опыт в обоих, и я бы сказал (если мы опустим время выполнения), TS более мощный, чем C #. Но F# мощнее TS :) - person Drag13; 28.07.2020