如何将包含JSX元素的JSX对象完整转换为字符串

问题核心是：JSON序列化仅支持标准JSON类型，会丢弃JSX元素、函数这类非标准JSON值；单JSX转字符串工具仅能处理单个元素，没有递归遍历对象的逻辑，因此需要自定义分层序列化逻辑，根据精度要求可以选两种实现路径：

方案1：运行时递归序列化（快速实现，适合无TS保留需求的场景） #

核心思路是递归遍历对象的所有属性，针对不同值类型走不同序列化逻辑：基础类型直接转字符串，JSX元素调用转换库生成字符串，函数/数组/普通对象走对应分支处理。

• 先安装基础依赖：
  执行npm install react-element-to-jsx-string安装JSX转字符串的基础工具
• 编写递归序列化函数：

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

function serializeValue(value) {
  // 处理空值
  if (value === null || value === undefined) return String(value);
  // 处理字符串、数字、布尔值
  if (typeof value === 'string') return `'${value.replace(/'/g, "\\'")}'`;
  if (['number', 'boolean'].includes(typeof value)) return String(value);
  // 处理JSX元素
  if (React.isValidElement(value)) {
    return `(${reactElementToJSXString(value, {
      showFunctions: true,
      useFragmentShortSyntax: true
    })})`;
  }
  // 处理函数
  if (typeof value === 'function') return value.toString();
  // 处理数组
  if (Array.isArray(value)) {
    const itemStr = value.map(item => serializeValue(item)).join(', ');
    return `[${itemStr}]`;
  }
  // 处理普通对象
  if (typeof value === 'object') {
    const entryStr = Object.entries(value).map(([key, val]) => {
      // 合法标识符直接用key，否则给key加单引号
      const formatedKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : `'${key}'`;
      return `${formatedKey}: ${serializeValue(val)}`;
    }).join(', ');
    return `{ ${entryStr} }`;
  }
  return String(value);
}

// 调用示例
const result = `const data = ${serializeValue(data)};`;

注意：该方案运行在JS编译后环境，TS类型标注会被编译抹除，无法保留args: string这类TS语法，同时JSX、函数的缩进格式会和源码有差异，适合对格式、TS保留无要求的场景。

方案2：构建期AST解析（100%保留源码格式、TS类型） #

如果你需要完全匹配源码的书写格式，保留TS类型、缩进、注释等所有原始内容，不要用运行时序列化，直接在构建阶段解析源码AST提取目标对象即可：

• 安装babel相关解析依赖
• 用解析器把.tsx/.jsx源码解析为AST语法树，定位到你定义的data变量对应的对象节点
• 用代码生成工具直接把该节点输出为原始源码字符串，拼接得到你需要的结果
  该方案不会丢失任何源码信息，输出内容和你手写的代码完全一致，适合对输出精度要求高的场景。

• 不要用JSON.stringify处理包含JSX、函数的对象，JSON规范不支持这两类值，转换时会直接丢弃
• 单独使用react-element-to-jsx-string只能处理单个JSX节点，必须搭配递归遍历逻辑才能支持嵌套对象的转换

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