最小示例:从反应应用程序中打开电子窗口?

问题描述

假设我正在使用 react/redux & 构建一个桌面应用程序.电子.所以我在电子中的 index.html 文件看起来像这样:

<!DOCTYPE html><html>...<身体><div id="content"></div><script src="public/js/bundle.js"></script></身体></html>

我最大的 React 容器(称为 app.js)被加载到 'id=content' div 中.到目前为止这工作正常，但现在我想知道当用户单击我的反应应用程序中的按钮时如何打开一个新的文件对话框窗口(或任何新窗口).

我发现了一些例子here &这里，但是这两个示例都只说明了如何从主电子进程(在渲染器或主进程中)加载文件对话框窗口.

但是，我希望用户与我的 React 应用程序互动，然后，一旦他或她点击一个按钮，我的应用程序应该告诉电子产生一个新窗口，这个新窗口当然应该以某种方式成为一部分我的反应应用程序.

如果有人能在这里提供一个最小的例子，说明这些如何协同工作，我将不胜感激.

解决方案

点击按钮在新窗口中打开 React 组件并检测窗口何时关闭 因为组件不会简单地调用 componentWillUnmount 当你关闭窗口时 你的应用应该是这样的

App.js

导出默认类 App 扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {//跟踪新窗口是否打开或关闭isNewWindow:假，};}使成为() {返回(//onClose 将在新窗口关闭时触发//NewWindowComponent 中的所有内容都被认为是 props.children 并且将是//在新窗口中显示{(this.state.isNewWindow) &&<新窗口组件onClose={() =>this.setState({ isNewWindow: false })><h2>这将显示在一个新窗口中</h2></新窗口组件>}<按钮onClick={() =>this.setState({ isNewWindow: true })}>在新窗口中打开</按钮>)}}

NewWindowComponent.js

导出默认类 NewWindowComponent extends Component {//创建一个容器 
对于窗户private containerEl = document.createElement('div');//这将保留窗口的引用私人外部窗口=空；//当组件挂载时，打开一个新窗口组件DidMount() {//window.open 中的第二个参数是可选的，可以设置为任意一个//你想要的值.当我们修改 main 时你会注意到这个值的使用//electron.js 文件this.externalWindow = window.open('', 'NewWindowComponent ');//附加容器 div 并注册将触发的事件//窗口关闭如果(this.externalWindow){this.externalWindow.document.body.appendChild(this.containerEl);this.externalWindow.onunload = () =>this.props.onClose();}}使成为() {返回 ReactDOM.createPortal(this.props.children, this.containerEl);}}

electron-main.js 或者你的主电子文件被命名

<代码>...函数创建窗口(){主窗口 = 新浏览器窗口({...//你需要激活 `nativeWindowOpen`webPreferences: { nativeWindowOpen: true },});...mainWindow.webContents.on('新窗口',(事件、url、frameName、disposition、options、additionalFeatures)=>{//这是我们为窗口选择的名称.你可以有多个名字//多个窗口，每个窗口都有自己的选项if (frameName === 'NewWindowComponent') {event.preventDefault();Object.assign(选项，{//这将阻止与主窗口的交互父:主窗口，宽度:300，身高:300，//你也可以设置 `left` 和 `top` 的位置});event.newGuest = new BrowserWindow(options);}});...}...

Say I am building a desktop application with react/redux & electron. So my index.html file in electron looks like this:

<!DOCTYPE html>
<html>
 ...
  <body>

    <div id="content"></div>

  <script src="public/js/bundle.js"></script>
  </body>
</html>

My biggest React container (call it app.js) is loaded into the 'id=content' div. This works fine so far, but now I am wondering how to open a new file dialog window (or any new window for that matter) when the user clicks a button in my react application.

I found some examples here & here, but both examples only explain how to load the file dialog window from the main electron processes (in renderer or main).

However, I want the user to engage with my React Application and then, once he or she clicks a button, my app should then tell electron to spawn a new window, and this new window should, of course, somehow be part of my react application.

I would really appreciate it if someone could provide a minimal example here, on how these to things work together.

解决方案

To open a react component in a new window on button click and detect when the window is closed because the component will not simply call componentWillUnmount when you close the window Your app should look like this

App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // To keep track of the new window if opened or closed
      isNewWindow: false,
    };
  }

  render() {
    return(
    // onClose will be fired when the new window is closed
    // everything inside NewWindowComponent is considered props.children and will be
    // displayed in a new window
    {(this.state.isNewWindow) &&
    <NewWindowComponent
      onClose={() => this.setState({ isNewWindow: false })>
      <h2>This will display in a new window</h2>
    </NewWindowComponent> }

    <button
      onClick={() => this.setState({ isNewWindow: true })}>
      Open in new window</button>
    )
  }
}

NewWindowComponent.js

export default class NewWindowComponent extends Component {
  // Create a container <div> for the window
  private containerEl = document.createElement('div');

  // This will keep a reference of the window
  private externalWindow = null;

  // When the component mounts, Open a new window
  componentDidMount() {
    // The second argument in window.open is optional and can be set to whichever
    // value you want. You will notice the use of this value when we modify the main
    // electron.js file
    this.externalWindow = window.open('', 'NewWindowComponent ');

    // Append the container div and register the event that will get fired when the
    // window is closed
    if (this.externalWindow)
    {
      this.externalWindow.document.body.appendChild(this.containerEl);
      this.externalWindow.onunload = () => this.props.onClose();
    }
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.containerEl);
  }
}

electron-main.js or however your main electron file is named

...
function createWindow() {
  mainWindow = new BrowserWindow({
    ...
    // You need to activate `nativeWindowOpen`
    webPreferences: { nativeWindowOpen: true },
  });
  ...
  mainWindow.webContents.on('new-window',
    (event, url, frameName, disposition, options, additionalFeatures) =>
    {
      // This is the name we chose for our window. You can have multiple names for
      // multiple windows and each have their options
      if (frameName === 'NewWindowComponent ') {
        event.preventDefault();
        Object.assign(options, {
          // This will prevent interactions with the mainWindow
          parent: mainWindow,
          width: 300,
          height: 300,
          // You can also set `left` and `top` positions
        });
        event.newGuest = new BrowserWindow(options);
    }
  });
  ...
}
...