React中渲染Quill编辑器数学内容报错问题求助

问题原因 #

直接使用dangerouslySetInnerHTML渲染富文本编辑器生成的KaTeX内容时，会出现报错和页面空白，主要原因包括：

• 缺少KaTeX的全局CSS样式，导致数学表达式的布局结构异常
• 插入的DOM未触发KaTeX的初始化流程，无法正确渲染公式
• 编辑器生成的HTML包含复杂节点（如SVG、contenteditable元素），与React的DOM处理逻辑冲突

解决方案 #

方案一：使用react-katex组件重新渲染（推荐） #

通过提取富文本中公式的TeX表达式，用React专用的KaTeX组件渲染，完全符合React的渲染机制，避免DOM操作冲突。

1. 安装依赖

npm install react-katex katex

2. 编写渲染组件

import React from 'react';
import { Math } from 'react-katex';
import 'katex/dist/katex.min.css';

const RenderRichText = ({ value }) => {
  // 解析HTML内容，区分普通文本和公式节点
  const parseContent = () => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(value, 'text/html');
    const nodes = Array.from(doc.body.childNodes);

    return nodes.map((node, idx) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        if (node.classList.contains('ql-formula')) {
          // 提取TeX表达式，用react-katex渲染
          const tex = node.getAttribute('data-value');
          return <Math key={`formula-${idx}`} math={tex} />;
        }
        // 递归处理其他HTML元素
        return React.createElement(
          node.tagName.toLowerCase(),
          { key: idx },
          parseNodeChildren(node)
        );
      } else if (node.nodeType === Node.TEXT_NODE) {
        return node.textContent;
      }
      return null;
    });
  };

  const parseNodeChildren = (parent) => {
    return Array.from(parent.childNodes).map((child, idx) => {
      if (child.nodeType === Node.ELEMENT_NODE) {
        if (child.classList.contains('ql-formula')) {
          const tex = child.getAttribute('data-value');
          return <Math key={`child-formula-${idx}`} math={tex} />;
        }
        return React.createElement(
          child.tagName.toLowerCase(),
          { key: idx },
          parseNodeChildren(child)
        );
      } else if (child.nodeType === Node.TEXT_NODE) {
        return child.textContent;
      }
      return null;
    });
  };

  return <div className="text-container flex">{parseContent()}</div>;
};

export default RenderRichText;

方案二：手动触发KaTeX初始化（兼容原有HTML结构） #

如果必须保留编辑器生成的HTML结构，可在DOM插入后手动调用KaTeX的渲染方法，修复公式显示问题。

1. 安装依赖

npm install katex

2. 编写渲染组件

import React, { useEffect, useRef } from 'react';
import katex from 'katex';
import 'katex/dist/katex.min.css';

const RenderRichText = ({ value }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 找到所有公式节点，重新渲染KaTeX
    const formulaEls = containerRef.current.querySelectorAll('.ql-formula');
    formulaEls.forEach(el => {
      const tex = el.getAttribute('data-value');
      el.innerHTML = '';
      katex.render(tex, el, {
        throwOnError: false, // 忽略渲染错误，避免页面崩溃
        displayMode: false
      });
    });
  }, [value]);

  return (
    <div
      ref={containerRef}
      className="text-container flex"
      dangerouslySetInnerHTML={{ __html: value }}
    />
  );
};

export default RenderRichText;

关键注意事项 #

• 必须引入KaTeX的CSS文件，确保公式样式正常加载
• 优先使用方案一，避免dangerouslySetInnerHTML带来的XSS风险和DOM冲突
• 设置throwOnError: false可以防止单个公式渲染错误导致整个页面崩溃

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