'Property does not exist' 在功能组件中添加了功能组件作为属性？

Question

我将 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>'.

如果我从 Card 中删除显式类型，它就可以工作。但是我想用React.FunctionComponent来指定它...可以吗？

我想我可以创建一个类型：

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

但这是唯一的解决办法吗？ React.FunctionComponent有什么解决办法吗？

Answer 1

你告诉 TypeScript Card 是一个类型为 React.FC 的函数。此类型不包含任何属性分隔符，因此 TypeScript 对此有所抱怨。

要解决此问题，您必须告诉 TypeScript 组件的正确类型，如下所示：

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

Card.Divider = Divider;

'Property does not exist' 在功能组件中添加了功能组件作为属性？

'Property does not exist' in a Functional Component with added functional components as properties to it?

typescript

reactjs

react-tsx

react-functional-component

react-typescript