Question

当我的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)
  });
}

我可能会说这一切都错了。电子相对较新。任何帮助都将非常感激。谢谢！

Answer 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>
  }
}

电子 - 在窗口显示时与渲染器通信

1 个答案: