'TS2769: 没有重载匹配这个调用'消耗 React 组件

Question

一段时间后尝试重新使用 React 和 TypeScript，但我遇到了一个我似乎无法解决的 TypeScript 错误。

ERROR in /Users/X/Projects/job-monitor-poc/src/index.tsx
[tsl] ERROR in /Users/X/Projects/job-monitor-poc/src/index.tsx(9,2)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>[]'.
      Type 'Element' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>[]': length, pop, push, concat, and 26 more.

版本是：

"@types/react": "^16.9.26",
"@types/react-dom": "^16.9.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.8.3",

我的组件被定义为Hello.tsx

import * as React from 'react';

export interface HelloProps {
    compiler: string;
    framework: string;
}

// Tried this, as shown at
// https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
export const Hello = (props: HelloProps) =>
    <h2>Hello from {props.compiler} and {props.framework}!</h2>;

// And this...
export const Hello: React.SFC<HelloProps> = (props: HelloProps) =>
    <h2>Hello from {props.compiler} and {props.framework}!</h2>;

// And this...
export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h2>Hello from {this.props.compiler} and {this.props.framework}!</h2>;
    }
}

哪个正在由index.tsx加载

import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './components/Hello';

import './styles.css';

ReactDom.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementsByTagName('body')
);

我发现了一些带有类似发音错误的 TypeScript 问题，尤其是这个. 我尝试降级到 React 16.4.7，但他们的其他建议似乎涉及对@types/react修改。

有没有人遇到过这个？ 任何解决方法？ 我是否在自己的代码中遗漏了一个明显的错误？

Answer 1

document.getElementsByTagName('body')返回一个元素数组。 因此，提取第一个元素将修复您的错误：

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementsByTagName("body")[0]
);

或者你可以使用更经典的document.getElementsById("root") ：

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById("root")
);

这假设 HTML 包含一个 id 为root的 div ：

  <body>
    <div id="root"></div>
  </body>

'TS2769: 没有重载匹配这个调用'消耗 React 组件

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-03-28 20:52:59

&#39;TS2769: 没有重载匹配这个调用&#39;消耗 React 组件

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-03-28 20:52:59

'TS2769: 没有重载匹配这个调用'消耗 React 组件

解决方案1
2 已采纳 2020-03-28 20:52:59