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

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

1 个答案: