如何将函数式React组件插入数据库获取的字符串HTML？

问题核心 #

从数据库获取WYSIWYG生成的合法HTML后，需要将其中的{{xxx}}合并标签替换为带状态管理、点击绑定的函数式React组件。之前尝试用dangerouslySetInnerHTML结合react-string-replace时，仅显示[object Object]——静态HTML插入正常，但交互式组件无法正确渲染。

原因分析 #

dangerouslySetInnerHTML仅接受字符串类型的HTML内容，当你把React组件对象传入时，会被强制转换为字符串[object Object]，这就是问题所在。必须将HTML内容拆分为纯HTML字符串片段和React组件的混合数组，让React直接渲染这个数组。

解决方案1：使用react-string-replace拆分渲染 #

利用react-string-replace将HTML字符串拆分为文本片段和组件占位符，分别处理纯HTML和交互式组件：

import reactStringReplace from 'react-string-replace';

function HtmlWithDynamicComponents() {
  // 从数据库获取的原始HTML
  const serverHtml = "<p>来自服务器的HTML{{react_link}}，还有另一个组件{{react_button}}</p>";
  
  // 定义带交互的函数式组件
  const InteractiveLink = () => <a onClick={() => alert('链接被点击！')}>点我</a>;
  const InteractiveButton = () => <button onClick={() => alert('按钮被点击！')}>提交</button>;

  // 处理替换逻辑
  const renderedContent = reactStringReplace(serverHtml, /{{(.*?)}}/g, (match, tagKey) => {
    // 根据标签key匹配对应的组件
    switch(tagKey) {
      case 'react_link':
        return <InteractiveLink key={`comp-${tagKey}`} />;
      case 'react_button':
        return <InteractiveButton key={`comp-${tagKey}`} />;
      default:
        return null;
    }
  }).map((item, idx) => {
    // 字符串片段用dangerouslySetInnerHTML渲染纯HTML
    if (typeof item === 'string') {
      return <span key={`html-${idx}`} dangerouslySetInnerHTML={{ __html: item }} />;
    }
    // React组件直接返回
    return item;
  });

  return <div>{renderedContent}</div>;
}

解决方案2：使用html-react-parser解析替换 #

如果HTML嵌套层级复杂，推荐用html-react-parser解析HTML并精准替换节点：

import parse from 'html-react-parser';
import { replaceChildren } from 'html-react-parser';

function HtmlWithDynamicComponents() {
  const serverHtml = "<div><p>来自服务器的HTML{{react_link}}</p><h3>标题{{react_button}}</h3></div>";
  
  const parseOptions = {
    replace: ({ node, children }) => {
      // 匹配包含模板标签的文本节点
      if (node.type === 'text' && node.data.includes('{{')) {
        // 拆分文本为纯HTML部分和标签部分
        const [beforeText, tag, afterText] = node.data.split(/({{.*?}})/);
        const tagKey = tag?.replace(/{{|}}/g, '');
        
        // 根据标签key返回对应组件
        let component = null;
        if (tagKey === 'react_link') {
          component = <a onClick={() => alert('链接点击！')}>点我</a>;
        } else if (tagKey === 'react_button') {
          component = <button onClick={() => alert('按钮点击！')}>提交</button>;
        }

        return [
          <span dangerouslySetInnerHTML={{ __html: beforeText || '' }} />,
          component,
          <span dangerouslySetInnerHTML={{ __html: afterText || '' }} />
        ];
      }
      // 其他节点正常递归处理
      return replaceChildren(node, children, parseOptions);
    }
  };

  return <div>{parse(serverHtml, parseOptions)}</div>;
}

关键注意事项 #

• 必须给每个数组元素添加唯一key，避免React渲染警告
• 纯HTML片段必须用dangerouslySetInnerHTML渲染，确保WYSIWYG生成的标签正确解析
• 交互式组件直接作为React元素插入，不需要转换为字符串

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