'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