电子 - 在窗口显示上与渲染器通信答案

【问题标题】：Electron - communicate to renderer on window show电子 - 在窗口显示上与渲染器通信
【发布时间】：2018-04-07 10:03:54
【问题描述】：

当电子窗口显示在我的 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);
});

然后在我的反应组件中，我想做这样的事情（与上面的示例相关）来处理该事件并触发我的通知：

class Profile extends Component {
  constructor(props) {
  super(props)

  ipcRenderer.on('open-finder-reply', (event, fileData) => {
    this.props.updateAvatar(fileData)
  });
}

我可能做错了。相对较新的电子。任何帮助都将不胜感激。谢谢！

【问题讨论】：

您只想发送一个ipc事件？致电window.webContents.send('event-type')see api doc

标签： reactjs electron

【解决方案1】：

主要和渲染器的反应组件之间通信的完整示例可能如下所示。

要向渲染器发送 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>
  }
}

【讨论】：