electron - 如何调用函数是 Electron 网页中的renderer.js/main.js

Question

在这里成为 Electron 新手，我已经用React JS构建了一个简单的Web应用程序，并能够通过调用在一个窗口中查看它

window.loadFile('./build/index.html');

现在，我想调用位于renderer.js/main.js中的函数，该函数应读取文件系统并将数据返回到Web应用程序。

我已经在renderer.js中尝试过

const { ipcRenderer } = require('electron');

document.getElementById('#button').addEventListener('click', function (event) {
    //read file contents
    console.log('file contents');
});

但是这里有两个问题

该控件来自renderer.js，相反，我想要
控件位于React的网页上。

读取的数据应返回到网页，以便可以在网页中显示。

Answer 1

您应该能够直接在React组件脚本上导入/获取ipcRenderer，甚至可以将文件加载到生命周期 Hook 上。 “renderer.js”只是在( Electron )网页上执行客户端javascript的一种方法，但任何其他方法也可以解决问题。

如果您无法从Web应用程序导入 Electron 或需要 Electron (我还没有玩 Electron react 样板)，那么您可以编写一个所谓的预加载脚本，在创建浏览器窗口时加载该脚本(请参阅该文档)。 )，然后将ipcRenderer放在窗口上，如下所示:

const {ipcRenderer} = require('electron')
window.ipcRenderer = ipcRenderer

然后，您可以从react应用访问它。