当电子窗口显示在main.js中时，我试图捕获渲染器进程（反应应用程序）中的事件。我（据我所知）无法使用react组件的生命周期，因为该组件已经安装在初始负载上，并且除非状态发生变化，否则电子组件不会更新，除非状态改变，电子主过程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
main.js
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'))
})
renderer.html
<html>
<head>
<script src="./renderer.js" charset="utf-8"></script>
</head>
<body>
<div id="render"></div>
</body>
</html>
renderer.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')
)
}
component.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>
}
}
| 归档时间： |
|
| 查看次数： |
2226 次 |
| 最近记录： |