纯ES6+HTML项目无React时如何实现函数返回JSX并渲染

1. JSX 不是 JavaScript 原生语法，是 React 生态定义的语法扩展，浏览器/NodeJS 原生引擎无法直接识别解析，必须经过编译工具转换为普通 JS 代码才能运行。不引入 React 也可以用 JSX，但必须配置对应的编译规则，无法直接在原生 ES6 项目里裸写 JSX 运行。
2. 你现有代码的两个直接错误：
   • const HTML = ${renderHTML}`` 这行是将renderHTML函数对象转为字符串（得到的是函数的完整源码文本），根本没有执行函数获取返回值，这是页面输出函数源码的直接原因。
   • 即使你修正为renderHTML()执行函数，没有JSX编译步骤的情况下，函数内部返回的<h1>...</h1>语法会直接触发JS解析错误，无法正常运行。

方案1：纯原生实现（无编译依赖，完全适配纯ES6+原生HTML技术栈） #

不需要使用JSX，直接通过返回DOM节点/HTML字符串的方式实现逻辑与结构拆分，零依赖即可运行。

写法1：直接返回原生DOM节点（性能最好，无XSS风险） #

结构文件./display/render.js：

export default function renderHTML() {
  const title = document.createElement('h1')
  title.textContent = 'I am the content! Rendered successfully!'
  // 复杂结构可以继续拼接其他子节点
  return title
}

入口文件main.js修正：

import renderHTML from './display/render.js';

const popup = document.getElementById('popup-container');
// 直接执行函数拿到DOM节点，插入即可
const contentNode = renderHTML();
popup.appendChild(contentNode);

写法2：返回HTML模板字符串（写法更接近HTML，适合复杂结构） #

结构文件./display/render.js：

export default function renderHTML() {
  // 用模板字符串写HTML结构，和写普通HTML一致
  return `
    <h1>I am the content! Rendered successfully!</h1>
    <p class="desc">支持任意复杂的HTML结构</p>
  `
}

入口文件main.js修正：

import renderHTML from './display/render.js';

const popup = document.getElementById('popup-container');
const htmlStr = renderHTML();
// 解析HTML字符串为DOM节点
const parseWrapper = document.createElement('div');
parseWrapper.innerHTML = htmlStr.trim();
// 插入所有子节点，不额外增加嵌套层级
popup.append(...parseWrapper.childNodes);

注意：如果HTML字符串内容包含用户输入，需要先做转义处理，避免XSS风险。

方案2：保留JSX写法（需要编译步骤，无React依赖） #

如果你就是想使用JSX的类HTML写法，不需要引入整个React，只需要配置Babel编译链，将JSX转换为原生DOM创建逻辑即可：

1. 安装Babel相关依赖，配置@babel/plugin-transform-react-jsx插件，设置编译pragma为你自己实现的createElement函数。
2. 实现你自己的createElement方法，接收标签名、属性、子节点参数，返回真实原生DOM，参考实现：

// ./functions/createElement.js
export default function createElement(tag, attrs = {}, ...children) {
  const node = document.createElement(tag);
  // 处理属性
  Object.entries(attrs).forEach(([attrKey, attrValue]) => {
    if (attrKey.startsWith('on')) {
      // 绑定事件
      node.addEventListener(attrKey.slice(2).toLowerCase(), attrValue);
    } else if (attrKey === 'className') {
      node.className = attrValue;
    } else {
      node.setAttribute(attrKey, attrValue);
    }
  });
  // 处理子节点
  children.forEach(child => {
    node.append(
      typeof child === 'string' ? document.createTextNode(child) : child
    );
  });
  return node;
}

3. 配置完成后，你写的JSX会被自动编译为createElement调用，此时render.js里的JSX写法就可以正常运行，入口文件直接执行renderHTML()拿到DOM节点插入即可。

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