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

Question

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

Answer 1

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