有两个窗口的电子伪造:如何渲染第二个窗口?电子反应应用 [英] electron-forge with two windows : how to render the second window? electron-react app

问题描述

我意识到第二个电子浏览器窗口确实打开了，但是无法正确显示.

I realized that the second electron browser window, does actually opens, but it doesn't render correctly.

在/tools/forge/forge.config.js中，两个窗口有两个入口点:

In /tools/forge/forge.config.js I have two entryPoints for the two windows:

        entryPoints: [

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer.ts'),
          // Main Window
          name: 'main_window',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index_two.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer_two.ts'),
          // Main Window
          name: 'main_window2',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

      ], 

这是main.ts中的相关部分:

And this is the related part in main.ts :

declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

let mainWindow;
let mainWindow2;

const createWindow = (): void => {
  mainWindow = new BrowserWindow({

  })
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  mainWindow2 = new BrowserWindow({

  })

  // Is this correct??
  mainWindow2.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
}

/src/renderer.ts:

/src/renderer.ts :

import './app';

/src/renderer_two.ts:

/src/renderer_two.ts :

import './app_two'

在src/app_two/components/App_two.tsx中:

In src/app_two/components/App_two.tsx :

class App extends React.Component {

  render(): JSX.Element {
    return (
      <div className='container'>
        <h2 className='heading'>
            SECOND WINDOW
        </h2>
        <p>
          <button id="exchange-greetings-with-first-window" onClick={() => {
            exchangeGreetingsFunct();
          }}>Exchange Greetings with First Window</button>
        </p>
      </div>
    );
  }
}

如您所见，第二个窗口(即右侧的窗口)无法正确呈现:

As you can see, the second window, which is the one on the right, doesn't rendere correctly:

如何正确加载第二个窗口的渲染?

How to correctly load the rendering for the second window?

推荐答案

在main.ts中使用它:

With this in main.ts :

ipcMain.handle("open-second-window", (IpcMainEvent, message) => {
  //mainWindow2.loadURL(path.join('file://', process.cwd(), 'index-2.html'));
  mainWindow2.loadURL('http://localhost:3000/main_window2'); // corresponding 
       to the main_window2 in /stc/tools/forge/forge.config.js : 
  mainWindow2.show();
});

我得到了正确的渲染

这篇关于有两个窗口的电子伪造:如何渲染第二个窗口?电子反应应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！