JSX元素类型“ xxx”不是JSX元素的构造函数。属性“ yyy”的保护类型为“ xxx”，但公共类型为“ ElementClass”

Question

我正在尝试Vega-Lite从名为的项目中导入一个React类Voyager。

这是我的代码：

import * as React from 'react';
import {VegaLite} from 'datavoyager/build/components/vega-lite';

export interface Props {
  spec: any;
  logger: any;
}

export const View = ({spec, logger}: Props) => {
  return(
    <VegaLite spec={spec} logger={logger}/>
  );
};

这是我的错误：

[ts] JSX元素类型'VegaLite'不是JSX元素的构造函数。属性'componentDidMount'在类型'VegaLite'中受保护，但在类型'ElementClass'中是公共的。

我知道在课堂上Vega-Lite，函数componentDidMount()确实是protected。但是，如何解决此错误？

PS：我试过设置allowSyntheticDefaultImports到true我的tsconfig.json，但同样的错误仍然存在。

Answer 1

您需要将您的反应类型降级到以下15.0.25版本。从版本开始，15.0.25所有生命周期方法都被迫公开。

这是一个关于它的问题：https ://github.com/DefinitelyTyped/DefinitelyTyped/issues/16893

更好的解决方案是在voyager存储库中创建一个问题，告诉他们他们的组件与较新的反应类型不兼容。他们使用^15.0.8。