如何在HTML字符串中嵌入ReactJS组件？适配Adapt Learning框架

1. 能否通过字符串创建自定义React组件？ #

可以，但不能直接通过dangerouslySetInnerHTML实现——这个API仅负责渲染原生HTML，不会解析React组件语法。需要自己实现一套解析逻辑，核心思路如下：

• 将包含自定义组件标签的字符串拆分原生HTML片段和自定义组件标签两部分
• 解析自定义组件标签，提取组件名与props
• 用React.createElement动态创建组件实例
• 借助html-react-parser这类工具将原生HTML片段转为React元素
• 最后将原生元素与自定义组件拼接成React元素数组渲染

简单实现示例：

import parse from 'html-react-parser';
import MyReactComponent from './MyReactComponent';

// 组件映射表：标签名对应实际组件
const componentMap = {
  'MyReactComponent': MyReactComponent
};

// 自定义解析器，处理组件标签
const customParser = (node) => {
  if (node.type === 'tag' && componentMap[node.name]) {
    const props = node.attribs || {};
    // 递归处理子节点
    return React.createElement(componentMap[node.name], props, node.children?.map(customParser));
  }
  // 原生节点交给默认解析逻辑
  return parse(node.toString(), { replace: customParser });
};

// 对外暴露的渲染方法
const renderContent = (contentString) => {
  return parse(contentString, { replace: customParser });
};

注意：需要提前把所有可能用到的自定义组件注册到componentMap中，确保React能找到对应组件。

2. 单页部署50+这类组件是否合适？ #

可行，但需要做好优化，关键看这几点：

• 组件体积：如果每个组件都是轻量型（几KB级别），总体积可控，不会有明显性能问题
• 懒加载：用React的React.lazy和Suspense实现组件懒加载，只在需要渲染对应组件时才加载代码，避免首屏一次性加载所有组件导致卡顿
• 渲染优化：如果组件会同时出现在页面上，用memo包装组件、优化props传递，减少不必要的重渲染

只要做好以上优化，单页部署50+自定义组件完全没问题。

3. 合规的客户端运行方案（排除MutationObserver） #

除了上述基于html-react-parser的解析方案，还有两种可行思路：

• 预编译模板：如果JSON内容格式相对固定，可在构建阶段用Babel将包含组件的字符串转成React组件模板，缺点是灵活性稍差
• 利用React JSX运行时：借助@babel/plugin-transform-react-jsx的运行时能力，将字符串形式的JSX转为React元素，示例：

import { jsx } from 'react/jsx-runtime';
import MyReactComponent from './MyReactComponent';

// contentString为标准JSX字符串，如"<MyReactComponent foo='bar' />"
const renderJSXFromString = (contentString) => {
  // 动态执行字符串，需注入依赖组件
  const renderFn = new Function('React', 'MyReactComponent', `return ${contentString}`);
  return renderFn(React, MyReactComponent);
};

⚠️ 注意：这种方式要严格确保输入内容的安全性，因为Function执行字符串等同于eval，仅适用于完全可信的JSON内容，避免XSS风险。

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