JSX元素类型'xxx'不是JSX元素的构造函数。属性'yyy'在类型'xxx'中受到保护，但类型为'ElementClass'的公共类型为

Question

我试图从名为Voyager的项目中导入名为Vega-Lite的React类。

这里是我的代码：

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 element type 'VegaLite' is not a constructor function for JSX elements. Property 'componentDidMount' is protected in type 'VegaLite' but public in type 'ElementClass'.

我知道，在课堂上Vega-Lite，功能componentDidMount()确实protected。但是，我该如何解决这个错误？

PS：我已经尝试在我的tsconfig.json中设置allowSyntheticDefaultImports到true，但同样的错误依然存在。

Answer 1

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

这里有一个问题吧：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16893

更好的解决方案在voyager回购来创建一个问题，它会告诉他们，他们的成分是不符合新的反应分型。他们使用^15.0.8。