JSX元素类型“element”没有任何构造或调用signatures.ts(2604)

Question

所以，这里有一个奇怪的例子。在另一个组件中呈现的React functional component(FC)。导入的FC是类型错误的FC，但具有所有正确的接口。

我已经搜索了所有与此相关的其他帖子，但没有一个适合我的用例。他们谈到了在这种情况下接口中的可选组件，但我不会使用这个。另外，我在同一个类中渲染其他FCs，他们没有得到这个错误。我要发疯了！请帮帮我！

React 17.0.2

@types/react 17.0.6

导入的组件(有错误)

...
<CreditCardDialog
   title={'Some String'}
   subTitle={`Some JSX string`}
   paymentAmount={'Some string'}
   verifiedOrganizationId={'Some string'}
   onSuccess={this.handleSuccess}
/>
...

组件接口

export interface ICreditCardDialogProps extends withI18nProps, IWithStripeElements {
  paymentAmount: string;
  verifiedOrganizationId: string;
  onSuccess: () => void;
  title: string;
  subTitle: string;
}

组件

const mapDispatchToProps = {
  showToastr,
  toggleDialog
};

type Props =
  ICreditCardDialogProps &
  typeof mapDispatchToProps;

const CreditCardDialog: FC<Props> = (props) => {
...
}


export default compose(
  withI18n(),
  connect(null, mapDispatchToProps),
  withStripeElements
)(CreditCardDialog);

Answer 1

我想通了。FC不喜欢呈现一个即席。我把它改成了一个类，即使是为了测试，仍然不好。因此，我最终从父类组件向FC传递了一个道具，它解决了这个错误。