如何将React中存储在变量内的JSX(HTML)转换为字符串格式

以下是不同场景下的可用实现方案：

• 方案1：使用React官方提供的ReactDOMServer API（支持服务端/客户端环境）
  这是最通用的官方实现方案，不需要额外引入第三方依赖，示例代码如下：

// 首先导入依赖
import ReactDOMServer from 'react-dom/server';

const jsxContent = <div>html</div>;
const htmlString = ReactDOMServer.renderToString(jsxContent);
// 输出结果默认带React内部属性：<div data-reactroot="">html</div>
// 如果需要纯原生HTML，可通过正则移除属性：
const pureHtmlString = htmlString.replace(/\s*data-reactroot="[^"]*"/g, '');
// 此时pureHtmlString的值为 "<div>html</div>"

• 方案2：客户端环境通过临时DOM节点转换
  如果仅在浏览器端使用，不想引入服务端相关依赖，可以通过临时DOM挂载JSX后获取innerHTML：

// React 18+ 写法
import React from 'react';
import ReactDOM from 'react-dom/client';

const jsxContent = <div>html</div>;
const tempContainer = document.createElement('div');
const root = ReactDOM.createRoot(tempContainer);
root.render(jsxContent);

setTimeout(() => {
  const htmlString = tempContainer.innerHTML;
  // htmlString的值为 "<div>html</div>"
}, 0);

如果使用React 17及更早版本，可简化为：

import ReactDOM from 'react-dom';

const jsxContent = <div>html</div>;
const tempContainer = document.createElement('div');
ReactDOM.render(jsxContent, tempContainer);
const htmlString = tempContainer.innerHTML;

• 方案3：使用第三方序列化库（仅复杂场景推荐）
  如果需要处理自定义组件序列化、属性过滤等特殊需求，可以使用react-element-to-jsx-string类的JSX序列化库，示例代码如下：

import reactElementToJSXString from 'react-element-to-jsx-string';

const jsxContent = <div>html</div>;
const htmlString = reactElementToJSXString(jsxContent);

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