reactjs - 如何使电子窗口自动适应内容？

Question

我用 create-react-app 创建了一个基本的应用程序，并用 Electron 包装了它。现在我只是在尝试一些东西，但我想要实现的只是一个适合内容大小的电子窗口。我几乎没有改变 CRA；我所做的就是用这个替换 App.js：

function App() {
  return (
    <div style={{ height: '100px', width: '200px', background: 'slategray' }}>
        This is some stuff
    </div>
  );
}

所以它应该渲染的是一个大小为 200x100 的 div。至于电子代码：

const { app, BrowserWindow, globalShortcut } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    // width: 80,
    // height: 60,
    useContentSize: true,
    show: false,
    // frame: false,
    // transparent: true,
  });
  const startURL = isDev ? 'http://localhost:3000/app' : `file://${path.join(__dirname, '../build/index.html')}`;

  mainWindow.loadURL(startURL);

  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  });
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

我已经尝试设置width和height特定值，并尝试将它们注释掉，如上所示，但没有任何变化；每当我启动应用程序时，窗口都会以指定的方式打开width，height而不是像我期望的那样打开 200x100 useContentSize: true。

标签： reactjselectron