React 18客户端如何实现renderToStaticMarkup功能？

以下是几个无需SSR的可行实现方案：

方案一：利用createRoot在内存DOM中渲染并提取HTML #

React 18的客户端渲染API可以通过临时DOM节点生成HTML，步骤简单且无额外依赖：

1. 创建内存中的<div>作为渲染容器
2. 使用createRoot挂载自定义组件到容器
3. 提取容器的innerHTML作为Highcharts所需的原始HTML
4. 卸载组件清理内存，避免泄漏

代码示例：

import { createRoot } from 'react-dom/client';

const chartOptions: Options = {
  chart: { height },
  tooltip: {
    formatter: function () {
      const tempContainer = document.createElement('div');
      const root = createRoot(tempContainer);
      
      // 渲染自定义组件
      root.render(<OurComponent />);
      
      // 获取生成的HTML字符串
      const tooltipHtml = tempContainer.innerHTML;
      
      // 卸载组件释放资源
      root.unmount();
      
      return tooltipHtml;
    }
  },
};

注：生成的HTML会包含React的data-reactroot等属性，但Highcharts可正常解析，不影响功能。

方案二：引入@react-dom/server的UMD版本 #

React 18移除了浏览器端内置的ReactDOMServer支持，但可单独引入@react-dom/server的UMD包，继续使用renderToStaticMarkup：

先通过CDN引入对应版本的包：

<script src="https://unpkg.com/@react-dom/server@18.2.0/umd/react-dom-server.browser.production.min.js"></script>

之后在代码中直接调用：

const chartOptions: Options = {
  chart: { height },
  tooltip: {
    formatter: function () {
      return ReactDOMServer.renderToStaticMarkup(<OurComponent />);
    }
  },
};

注：需保证UMD包版本与项目React版本一致，避免兼容性问题。

方案三：手动拼接HTML（适合简单组件） #

如果OurComponent结构简单、无复杂逻辑，可直接手动拼接HTML字符串，绕过React渲染：

const chartOptions: Options = {
  chart: { height },
  tooltip: {
    formatter: function () {
      // 模拟自定义组件的HTML结构
      return `<div class="custom-tooltip">
                <p>数据值：${this.point.value}</p>
              </div>`;
    }
  },
};

该方式仅适合简单场景，复杂组件维护成本高，不推荐使用。

内容的提问来源于stack exchange，提问作者scott dickerson