reactjs - 带有两个窗口的 electron-forge : how to render the second window? electron-react app

Question

我意识到第二个 Electron 浏览器窗口确实打开了，但它没有正确呈现。

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

        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 中的相关部分:

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 :

import './app';

/src/renderer_two.ts :

import './app_two'

在 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>
    );
  }
}

如您所见，右边的第二个窗口没有正确呈现:

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

Answer 1

Hello on entryPoints in package.json 文件你应该做这样的事情

"entryPoints": [
            {
              "html": "./src/foldera/view.html",
              "js": "./src/renderer.js",
              "name": "foldera_window",
              "preload": {
                "js": "./src/foldera/preload.js"
              }
            },
            {
              "html": "./src/folderb/view.html",
              "js": "./src/renderer.js",
              "name": "folderb_window",
              "preload": {
                "js": "./src/folderb/preload.js"
              }
            }
          ]

然后你就可以使用了

FOLDERA_WINDOW_PRELOAD_WEBPACK_ENTRY FOLDERA_WINDOW_WEBPACK_ENTRY
FOLDERB_WINDOW_PRELOAD_WEBPACK_ENTRY FOLDERB_WINDOW_WEBPACK_ENTRY

我认为变量名取决于入口点的名称