未使用 React 和 Electron 调用事件处理程序答案

【问题标题】：Event handlers not being called with React and Electron未使用 React 和 Electron 调用事件处理程序
【发布时间】：2020-12-11 18:44:23
【问题描述】：

我正在尝试使用 Electron，并且我已经使用 typescript 设置了一个应用程序并做出反应。我在渲染器中的反应组件没有以我通常期望的方式响应事件。

我已经剥离了我的反应代码以消除无关的位，这是我的 App.tsx

import React, { useState } from 'react'

console.log("I'm here I'm ready")

const App: React.FC<{}> = () => {
  const [testValue, setTestValue] = useState(0)

  const handleClick = () => {
    console.log('incrimenting test value')
    setTestValue(s => s++)
  }

  return (
    <div>
      <button onClick={handleClick}>click me</button>
      <p>Test value is: {testValue}</p>
    </div>
  )
}

export default App

这是运行时的样子

点击按钮什么都不做。我希望它记录“增加测试值”并更改按钮下显示的值。

任何想法我哪里出错了？

编辑：如果你想查看我的 webpack 配置、package.json 等 https://github.com/Si3rr4wow/electron-test-2

，这里有一个 git repo

【问题讨论】：

您能否先尝试修复文档中指定的安全问题（尽管这不应该成为问题）。另外，另一个建议是包含函数参数和组件的类型。

标签： reactjs electron

【解决方案1】：

我通过从 17.0.1 降级到 react@16.13.1 和 react-dom@16.13.1 来解决此问题

编辑：今天找到了真正的解决方案。我愚蠢地在我的 index.html 中添加了 bundle.js 的脚本标签，这导致了 2 个虚拟 DOM。删除它并让 webpack 为我附加 bundle.js 后，行为恢复正常。

【讨论】：