Реактивный компонент импорта ES6 с ошибкой Typescript TS2604? - PullRequest
Новая
       8

Реактивный компонент импорта ES6 с ошибкой Typescript TS2604?

0 голосов
/ 19 октября 2018

Я пытаюсь динамически импортировать React Component из модуля, подобного этому: 

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.

1 Ответ

0 голосов
/ 20 октября 2018

В синтаксисе <Foo .../> Foo должен быть компонентом типа (т. Е. Типа React.ComponentType<P> для соответствующего P);например, Foo может быть именем класса компонента, который вы определили.React создаст для вас экземпляр типа компонента во время рендеринга.Вы не передадите экземпляр компонента, который вы создали сами (например, let Bar = new Foo(); <Bar .../>);это не имеет смысла.Но это то, что вы пытаетесь сделать с OsdComponent, поскольку вы объявили его тип как React.Component<any, any>.Измените тип на React.ComponentType<any, any> (что, вероятно, фактически возвращает ваш динамический импорт), и ошибка должна исчезнуть.(Конечно, было бы лучше указать хотя бы тип реквизита вместо использования any.)

...