当我的main.js中显示电子窗口时,我试图在渲染器进程中捕获一个事件(反应应用程序)。我(根据我的知识)无法使用反应组件生命周期,因为组件已经在初始加载时安装,并且除非状态发生更改,否则电子主进程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)
});
}
我可能会说这一切都错了。电子相对较新。任何帮助都将非常感激。谢谢!
答案 0 :(得分:5)
主要和渲染器的反应组件之间的通信的完整示例可能如下所示。
要向渲染器发送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>
}
}