javascript - 动态导入ES6 React组件并出现Typescript TS2604错误？

我正在尝试从如下模块动态导入react组件：

state: {
  OsdComponent: React.Component<any, any>
}

constructor(props) {
  super(props)
  this.state = {
    OsdComponent: null,
  }
}

async componentWillMount() {
   const {OsdComponent} = await import(`manifest-viewer`)
   this.setState({OsdComponent})
}

然后尝试在“渲染”中这样使用它：

render() {
   const {OsdComponent} = this.state
   if (OsdComponent) {
     <OsdComponent/>
   }
}

但是typescript编译失败，因为“ts2604:jsx元素类型”osdcomponent“没有任何构造或调用签名。”
代码在另一个未使用typescript编译的模块中工作。

最佳答案

在<Foo .../>语法中，Foo必须是组件类型（即，对于适当的React.ComponentType<P>，类型为P）；例如，Foo可以是您定义的组件类的名称。react将在渲染期间为您创建组件类型的实例。您不会传入您自己创建的组件实例（例如let Bar = new Foo(); <Bar .../>）；这是没有意义的。但这正是你试图用OsdComponent来做的，因为你已经声明它的类型为“cc>”。将类型更改为React.Component<any, any>（这可能是动态导入实际返回的值），错误应该消失。（当然，最好至少指定道具类型，而不是使用React.ComponentType<any, any>）