.tsx 组件中的 .js 组件 - 没有重载匹配此调用/属性在类型 Intrinsic

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

Answer 1

我刚刚遇到了一个非常相似的问题。事实证明，我根据子组件上的属性类型（或者可能是 TypeScript 的推断？）调用了带有无效属性的 JSX 子组件。const profile = someQuery.profile || {id: -1, name: "Guest"}//...<SubComponent profile={profile} />id这里应该是一个字符串，而不是数字。谈到-1为"-1"解决我的问题。

Answer 2

结果证明这是两个问题的组合：首先，错误Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'指的是一个完全不同的组件，一个正在使用material-ui Typography组件的组件，这里已经提出并回答了一个问题：Typography component。当我添加这张票时，我在尝试一些事情的同时升级了我的依赖项，material-ui然后新版本抛出了这个新错误。其次，在组件内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<...>'. 渲染.js组件时出现的错误.tsx确实使用我已经包含在我的问题中的语法被消除了：&nbsp; /* tslint:disable */&nbsp; const JSProfileDetails: any = ProfileDetails;&nbsp;&nbsp; /* tslint:enable */&nbsp; return (&nbsp; &nbsp;<JSProfileDetails&nbsp; &nbsp; &nbsp; &nbsp; profileName={profileName}&nbsp; &nbsp; &nbsp; &nbsp; profileDetails={profileDetails}&nbsp; &nbsp; &nbsp; &nbsp; profileInitialValues={profileInitialValues}&nbsp; &nbsp; &nbsp; />感谢您抽出宝贵时间提供意见。