带有 Typescript TS2604 错误的动态导入 ES6 React 组件？答案

【问题标题】：Dynamic Import ES6 React Component with Typescript TS2604 error?带有 Typescript TS2604 错误的动态导入 ES6 React 组件？
【发布时间】：2018-10-19 10:06:18
【问题描述】：

我正在尝试从这样的模块中动态导入 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 编译的模块中工作。

【问题讨论】：

包含您引用的方法的组件类的状态类型可能是错误的。请将该类的声明添加到问题中（例如，class MyComponent extends React.Component<..., ...>）。
请注意，当您编辑问题时我没有收到通知，所以我很幸运今天回来查看并看到了编辑。当有人向您询问更多信息并且您将其添加到问题中时，最好添加评论以通知他们。

标签： javascript reactjs typescript dynamic-import

【解决方案1】：

在<Foo .../> 语法中，Foo 必须是一个组件type（即，对于适当的P，类型为React.ComponentType<P>）；例如，Foo 可以是您定义的组件类的名称。 React 会在渲染过程中为你创建一个组件类型的实例。您不会传入您自己创建的组件实例（例如，let Bar = new Foo(); <Bar .../>）；那是没有意义的。但这就是您尝试使用OsdComponent 所做的事情，因为您已将其类型声明为React.Component<any, any>。将类型更改为React.ComponentType<any, any>（这可能是您的动态导入实际返回的内容），错误应该会消失。（当然，最好至少指定道具类型而不是使用any。）

【讨论】：