如何在Electron主进程中运行ReactDomServer.renderAsStaticMarkup

当然有可行的实现方式，以下是几种实用方案：

1. 手动用React.createElement替代JSX #

JSX本质上是React.createElement的语法糖，直接使用这个API就能绕开JSX语法限制。示例代码：

const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 用React.createElement定义组件
function MyComponent() {
  return React.createElement('div', { className: 'main-content' }, 
    React.createElement('h1', null, '主进程生成的静态标记'),
    React.createElement('p', null, '无需JSX即可运行')
  );
}

// 生成静态HTML
const staticMarkup = ReactDOMServer.renderAsStaticMarkup(MyComponent());
console.log(staticMarkup);

这种方式不需要额外构建工具，直接在主进程文件中运行。

2. 预编译JSX组件为普通JavaScript #

如果习惯写JSX，可以把组件单独放在JSX文件中，通过构建工具编译为Node.js可执行的CommonJS模块，再在主进程中引入。

示例流程： #

• 安装依赖：npm install react react-dom @babel/core @babel/cli @babel/preset-react @babel/preset-env --save-dev
• 创建Babel配置文件.babelrc：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

• 编写JSX组件文件src/components/MyComponent.jsx：

import React from 'react';

export default function MyComponent() {
  return (
    <div className="main-content">
      <h1>主进程生成的静态标记</h1>
      <p>通过预编译支持JSX</p>
    </div>
  );
}

• 编译组件：npx babel src/components --out-dir dist/components
• 主进程中引入编译后的组件：

const React = require('react');
const ReactDOMServer = require('react-dom/server');
const MyComponent = require('../dist/components/MyComponent').default;

const staticMarkup = ReactDOMServer.renderAsStaticMarkup(React.createElement(MyComponent));
console.log(staticMarkup);

也可以用ESBuild替代Babel，配置更简洁，编译速度更快：

• 安装ESBuild：npm install esbuild --save-dev
• 编译命令：npx esbuild src/components/MyComponent.jsx --bundle --platform=node --outfile=dist/components/MyComponent.js

3. 直接编译主进程的JSX代码 #

如果主进程代码本身包含JSX，可以直接用ESBuild或Webpack把整个主进程代码编译成Node.js可执行文件。比如用ESBuild：

• 编写主进程文件src/main.jsx：

const React = require('react');
const ReactDOMServer = require('react-dom/server');

function MyComponent() {
  return <div>主进程JSX代码直接编译</div>;
}

const staticMarkup = ReactDOMServer.renderAsStaticMarkup(<MyComponent />);
console.log(staticMarkup);

• 编译命令：npx esbuild src/main.jsx --bundle --platform=node --outfile=dist/main.js
• 运行编译后的主进程：electron dist/main.js

注意事项 #

• 确保主进程环境中已安装react和react-dom依赖：npm install react react-dom
• 主进程是Node.js环境，不要使用浏览器端的API，组件中避免依赖DOM相关特性。

内容的提问来源于stack exchange，提问作者Suraj Air