reactjs - JSX 元素类型 'xxx' 不是 JSX 元素的构造函数。属性 'yyy' 在类型 'xxx' 中 protected ，但在类型 'ElementClass' 中是公共(public)的

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 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

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

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

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