电子反应样板：点击按钮的子窗口答案

【问题标题】：electron-react-boilerplate :sub window on clicking a button电子反应样板：点击按钮的子窗口
【发布时间】：2020-01-02 13:11:29
【问题描述】：

我怀疑如何将 reactjs 文件加载到新窗口中单击电子反应样板中的按钮。

const handleVideoCall=()=>{
    const remote=require('electron').remote;
    const BrowserWindow=remote.BrowserWindow;
    const win = new BrowserWindow({
      height: 600,
      width: 800,
    });

    win.loadFile(fileName);
  }

handleVideoCall 是单击按钮时调用的方法。 FileName 是我需要打开的 reactjs 文件。由于没有来自 react-electron-boilerplate 的文档，我被困住了。任何帮助都是可观的。

【问题讨论】：

你有什么问题？你想逐行解释这个确切的代码吗？

标签： reactjs electron

【解决方案1】：

我得到了答案，我认为这对很多人都有帮助，因为没有电子反应样板的文档。使 nodeIntegration 为 true 或预加载 js。

const handleVideoCallNew = async number => {
    const remote=require('electron').remote;
    const BrowserWindow=remote.BrowserWindow;
    const win = new BrowserWindow({
      height: 600,
      width: 800,
      frame:false,
      webPreferences: {
        nodeIntegration: true,
    }
    });
    win.loadURL(`file://${__dirname}/app.html#/login`);


  }

在路由器文件上

<Route path="/login" component={Login} />

通过使用此代码，我们可以打开 reactjs 文件并路由到登录。 app.html 是在电子反应样板代码的 main.dev.js 中加载的主文件。散列是打开 reactjs 文件的最简单方法。由于 electron 中的 loadURL 仅加载 urls 和 htmls 文件，我们无法打开 js 文件。 所以打开主 app.html 并使用路由进行哈希。

【讨论】：

这是正确的答案，我们只需要确保以正确的顺序包含<Route ...：github.com/electron-react-boilerplate/…

【解决方案2】：

只需创建一个 react videoCall 组件，然后创建一个窗口并使用这样的查询参数加载一个 url，

   const videoCallWidow = new BrowserWindow({
       height: 600,
        width: 800,     
      webPreferences: {
        nodeIntegration: true,
        webSecurity: false,
      },
    })
    

    videoCallWidow.loadURL(
       url.format({
            pathname: path.join(__dirname, '../build/index.html'),
            protocol: 'file:',
            slashes: true,
            query: {
              page: 'videoCall',
            },
          })
    )

之后，在您的 index.js 文件中，您将获得查询参数，以便您可以设置条件来加载 videoCall 组件或应用程序组件。

ReactDOM.render(
  locationPath === 'videoCall' ? <videoCallComponent /> : <App />,
  document.getElementById('root')
)

【讨论】：