不用React（以SolidJS为例）如何从JSX获取HTML字符串？

方案1：自定义JSX转HTML字符串函数 #

通过配置Babel的@babel/plugin-transform-react-jsx插件，将JSX编译调用自定义函数，直接生成HTML字符串，全程无需操作DOM：

// 自定义转换函数
function jsxToHtml(tag, props = {}, ...children) {
  // 处理属性映射，比如className转class
  const propsStr = Object.entries(props)
    .map(([key, value]) => {
      key = key === 'className' ? 'class' : key;
      return `${key}="${value}"`;
    })
    .join(' ');

  // 递归处理嵌套JSX子元素
  const childrenStr = children
    .map(child => typeof child === 'string' ? child : jsxToHtml(...child))
    .join('');

  return propsStr ? `<${tag} ${propsStr}>${childrenStr}</${tag}>` : `<${tag}>${childrenStr}</${tag}>`;
}

// 使用JSX（需Babel编译）
const htmlString = jsxToHtml('div', { className: 'content' }, 
  '这是一段文本',
  jsxToHtml('span', { style: 'color: red' }, '红色文字')
);
// 输出：<div class="content">这是一段文本<span style="color: red">红色文字</span></div>

方案2：内存中构建DOM元素，无需挂载页面 #

不用创建隐藏div，直接在内存里构建DOM元素，再获取其HTML字符串：

function createHtmlElement(tag, props = {}, ...children) {
  const element = document.createElement(tag);

  // 设置元素属性
  Object.entries(props).forEach(([key, value]) => {
    if (key === 'className') {
      element.className = value;
    } else if (key === 'style' && typeof value === 'object') {
      Object.assign(element.style, value);
    } else {
      element.setAttribute(key, value);
    }
  });

  // 添加子元素
  children.forEach(child => {
    if (typeof child === 'string') {
      element.appendChild(document.createTextNode(child));
    } else {
      element.appendChild(child);
    }
  });

  return element.outerHTML;
}

// 使用示例
const htmlString = createHtmlElement('div', { className: 'box' },
  createHtmlElement('p', null, '无需挂载到DOM的HTML生成')
);

方案3：使用轻量级JSX处理库 #

比如htm库，可在浏览器中直接解析JSX语法，无需Babel编译，配合自定义转换逻辑即可：

import htm from 'htm';

// 绑定自定义转换逻辑
const htmlToStr = htm.bind((tag, props, ...children) => {
  const el = document.createElement(tag);
  // 处理属性
  Object.entries(props || {}).forEach(([key, value]) => {
    if (key === 'className') el.className = value;
    else el.setAttribute(key, value);
  });
  // 处理子元素
  children.forEach(child => {
    el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
  });
  return el.outerHTML;
});

// 直接写JSX风格代码
const htmlString = htmlToStr`
  <div className="container">
    <h3>轻量级JSX转HTML</h3>
    <p>无需完整React生态</p>
  </div>
`;

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