reactjs - 我可以对包装在 HOC 中的组件进行 typescript props 验证吗？

Question

我正在使用 React HOC 编写组件，但在使用 typescript 验证道具时出错。错误如下

类型'{类型：字符串；imgUrl：任何；vidUrl：任何；}' 不可分配给类型 'IntrinsicAttributes & Pick & { children?: ReactNode;}'。

我的组件是什么样的（示例）：

type Props = {
type: string;
imgUrl: any;
vidUrl: any;
}
const Component = ({type,imgUrl,vidUrl}:Props)=> (
<div>.....
.....
</div>
)
export defualt withTranslation('common')(Component);

Answer 1

您必须为组件提供正确的类型。

import { withTranslation, WithTranslation } from 'react-i18next';
import React from "react";
type Props = {
  type: string;
  imgUrl: any;
  vidUrl: any;
  }
  const Component: React.FC<Props & WithTranslation> = ({type,imgUrl,vidUrl})=> (
  <div>.....
  .....
  </div>
  )
  const withTranslationComponent = withTranslation('common')(Component);
  export default withTranslationComponent;