reactjs - 如何在 TypeScript 中使用 Electron 标签？

Question

在我的模块顶部，我有

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 :





另外，通过写 declare module在我的代码中覆盖，它会使所有其他内在元素类型在我的所有其他文件中中断。例如:



还尝试将我的 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在 TypeScript 中与 JSX 一起正常工作，同时也不会破坏所有其他内在元素类型？

类似问题: Control a WebView object in Electron with typescript

编辑:我也试过 declare module JSX ，但没有运气:

首先它告诉我 JSX是“已声明但它的值从未被读取”:





我收到 <webview> 的错误关于 HTMLWebViewElement ，所以 <webview>未被视为 Electron.WebviewTag元素:

Answer 1

要扩充模块(与声明模块相比)，请添加 import 'moduleName'前:

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