javascript - .tsx 组件中的 .js 组件 - 没有重载匹配此调用/属性在 IntrinsicAttributes 类型上不存在

Question

我正在尝试在 .tsx 函数组件的 render() 函数中包含一个 .jsx(或 .js)React 类有状态组件。根据我尝试的事情，我收到不同的错误“没有属性匹配此调用”。

我尝试了我在 github 上看到的东西，比如:

//...
  /* tslint:disable */
  const JSProfileDetails: any = ProfileDetails; 
  /* tslint:enable */

  return (
// ...
   <JSProfileDetails
        profileName={profileName}
        profileDetails={profileDetails}
        profileInitialValues={profileInitialValues}
      />

但到目前为止几乎没有任何效果。我将该组件保留在 .jsx/.js 中，因为几乎不可能输入它。

我在 typescript@3.7.2 上，我的 tsconfig.json 是:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es6",
    "lib": ["es2019", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "importHelpers": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["react", "node", "jest"],
    "noUnusedLocals": true,
    "skipLibCheck" : true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

我得到的确切错误是:

o overload matches this call.
  Overload 1 of 2, '(props: TypographyProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Componen
t<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | Component<...>', gave the following error.
    Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'.
  Overload 2 of 2, '(props: PropsWithChildren<TypographyProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (prop
s: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | Component<...>', gave the following error.
    Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'.

同时VS code报错是:

Type '{ profileName: string; modelId: string; definitionName: string; profileDetails: ProfileUI; profileInitialValues: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<RouteComponentProps<any, StaticContext, any>, never>, any, any>> & Readonly<Pick<RouteComponentProps<any, StaticContext, any>, never>> & Readonly<...>'.
  Property 'profileName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<RouteComponentProps<any, StaticContext, any>, never>, any, any>> & Readonly<Pick<RouteComponentProps<any, StaticContext, any>, never>> & Readonly<...>'.

Answer 1

我刚刚遇到了一个非常相似的问题。事实证明，我是根据子组件上的 proptypes(或者可能是 TypeScript 的推断？)使用无效的 prop 调用 JSX 子组件。

const profile = someQuery.profile || {id: -1, name: "Guest"}
//...
<SubComponent profile={profile} />

id 在这里应该是一个字符串，而不是数字。将 -1 转换为 "-1" 解决了我的问题。