Как использовать тег Electron <webview>в TypeScript? - PullRequest
Новая
       33

Как использовать тег Electron <webview>в TypeScript?

1 голос
/ 18 мая 2019

В верхней части моего модуля у меня есть 

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      webview: Electron.WebviewTag
    }
  }
}

, тогда в моем методе рендеринга у меня есть 

  render() {
    const {classes: c} = this.props

    return (
      <webview
        className={c.webview}
        ref={this.webviewRef}
        src={getFileUrl('annotator/StandaloneEntry.html')}
        nodeintegration="true"
        webpreferences="nodeIntegrationInWorker"
        nodeintegrationinsubframes="true"
        disablewebsecurity="true"
        allowpopups="true"
      />
    )
  }

, но TypeScript жалуется, что Property 'addEventListener' is missing:

enter image description here

enter image description here

Плюс, записав, что declare module переопределит в моем коде, он сделает все остальные внутренние элементынаборы ломаются во всех моих других файлах.Например:

enter image description here

Также попытался изменить мою декларацию JSX на 

declare namespace JSX {
  export interface IntrinsicElements {
    webview: Electron.WebviewTag
  }
}

или 

declare namespace JSX {
  interface IntrinsicElements {
    webview: Electron.WebviewTag
  }
}

но они не работают.

Если я откажусь от JSX для этого, и вместо этого вручную использую React.createElement, то он просто работает: 

    return React.createElement('webview', {
      ref: this.webviewRef,
      className: c.webview,
      src: getFileUrl('annotator/StandaloneEntry.html'),
      nodeintegration: 'true',
      nodeintegrationinsubframes: 'true',
      webpreferences: 'nodeIntegrationInWorker',
      disablewebsecurity: 'true', // does 'false' stille work?
      allowpopups: 'true',
    })

Любые идеи, какзаставить webview правильно работать с JSX в TypeScript, не нарушая при этом все другие внутренние типы элементов?

Аналогичный вопрос здесь: Управление объектом WebView в Electron с помощью машинописи

РЕДАКТИРОВАТЬ: Я также пытался declare module JSX, но не повезло:

Сначала он говорит мне, что JSX "объявлен, но его значение никогда не читается":

enter image description here

enter image description here

И я получаю ошибку с <webview> относительно HTMLWebViewElement, поэтому <webview> не обрабатываетсякак элемент Electron.WebviewTag:

enter image description here

Ответы [ 2 ]

0 голосов
/ 18 мая 2019

Для дополнения модуля (против объявления модуля) добавьте import 'moduleName' перед: 

import 'react';
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      webview: Electron.WebviewTag
    }
  }
}
0 голосов
/ 18 мая 2019

Определение внешнего модуля для JSX должно помочь: 

import { WebviewTag } from 'electron';

declare module JSX {
 interface IntrinsicElements {
   webview: WebviewTag;
 }
}

См. Соответствующую проблему Github TSX отклоняет пользовательские элементы и документы для окружающих модулей

...