当我的 main.js 中显示 Electron 窗口时，我试图在我的渲染器进程( react 应用程序)中捕获一个事件。我无法(据我所知)使用 react 组件生命周期，因为组件已经在初始加载时安装并且不会更新，除非状态更改， Electron 主进程 ShowWindow 在初始加载后都不会触发。
我的用例是在用户从托盘打开窗口时检查新数据，并触发通知。同样，启动应用程序，关闭托盘，然后重新打开不会更新状态，从而阻止我利用组件生命周期。
所以，我试图找到一种方法，当主进程显示窗口时，从 ipcMain 向 ipcRenderer 发送消息，但我有问题弄清楚如何。
这是相关的 main.js 代码:
tray.on('click', function (event) {
toggleWindow()
}
function toggleWindow() {
if (window.isVisible()) {
window.hide()
} else {
showWindow()
}
}
function showWindow() {
const position = getWindowPosition()
window.setPosition(position.x, position.y, false)
window.show()
window.focus()
toggleTrayIcon()
}
在我的代码的其他地方，我正在做这样的事情来与渲染器通信，但在这种情况下，我不确定如何处理事件对象:
ipcMain.on('open-finder', function(event, arg) {
let properties = { properties: ['openFile'], filters: [{name: 'Images', extensions: ['jpg', 'png', 'jpeg']}] }
let filePath = dialog.showOpenDialog(window, properties);
let fileData = filePath ? getBase64(filePath[0]) : null
event.sender.send('open-finder-reply', fileData);
});
然后在我的 react 组件中，我想做一些类似的事情(与上面的示例相关)来处理该事件并触发我的通知:
class Profile extends Component {
constructor(props) {
super(props)
ipcRenderer.on('open-finder-reply', (event, fileData) => {
this.props.updateAvatar(fileData)
});
}
我可能会在这一切都错了。 Electron 相对较新。任何帮助都将不胜感激。谢谢!
最佳答案
主要和渲染器的 react 组件之间通信的完整示例可能如下所示。
要将 ipc 消息发送到渲染器，您可以使用 webContents.send
主文件
const { app, BrowserWindow } = require('electron')
const path = require('path')
app.once('ready', () => {
const win = new BrowserWindow()
win.webContents.once('dom-ready', () => {
setTimeout(() => {
win.webContents.send('ready') // send to renderer
}, 3000)
})
win.loadURL(path.join(__dirname, 'renderer.html'))
})
渲染器.html
<html>
<head>
<script src="./renderer.js" charset="utf-8"></script>
</head>
<body>
<div id="render"></div>
</body>
</html>
渲染器.js
const React = require('react')
const ReactDOM = require('react-dom')
require('babel-register')
const Comp = require('./component')
window.onload = () => {
ReactDOM.render(
React.createElement(Comp),
document.getElementById('render')
)
}
组件.js
const { ipcRenderer } = require('electron')
const React = require('react')
module.exports = class extends React.Component {
constructor (props) {
super(props)
this.state = {isReady: false}
ipcRenderer.on('ready', () => {
this.setState({isReady: true})
})
}
render () {
return <p>Is ready: {`${this.state.isReady}`}</p>
}
}
关于reactjs - Electron - 在窗口显示中与渲染器通信，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46947260/