.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) => Component<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 (props: 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确实使用我已经包含在我的问题中的语法被消除了：

  /* tslint:disable */

  const JSProfileDetails: any = ProfileDetails; 

  /* tslint:enable */

  return (

   <JSProfileDetails

        profileName={profileName}

        profileDetails={profileDetails}

        profileInitialValues={profileInitialValues}

      />

感谢您抽出宝贵时间提供意见。