如何将HTML与React组件存入字符串并实现渲染？

你遇到的核心问题是：dangerouslySetInnerHTML只能解析纯HTML内容，没法识别其中的React组件标签和动态变量——直接把<MathJax.Node>这类组件写进__html字符串里，只会被当成普通HTML标签处理，根本不会触发React的组件渲染，变量也只会显示成字符串字面量。

下面是可行的解决思路和代码示例：

拆分内容，分别渲染 #

不要把React组件和变量塞进HTML字符串，而是在JSX中直接组合不同类型的内容：

• 纯HTML片段用dangerouslySetInnerHTML处理
• React组件直接正常渲染
• 动态变量直接插入JSX

import { useState } from "react";
import MathJax from "react-mathjax";
import { lhospital } from "./equations/equations";

function App() {
  const [count, setCount] = useState(0); // 示例动态变量

  return (
    <MathJax.Provider>
      <div>
        {/* 处理纯HTML部分 */}
        <span dangerouslySetInnerHTML={{ __html: `<strong>L'hospital</strong>: ` }} />
        {/* 直接渲染MathJax组件 */}
        <MathJax.Node formula={lhospital} />
        {/* 插入动态变量和内嵌HTML样式 */}
        <span> 当前计数：<i>{count}</i></span>
      </div>
    </MathJax.Provider>
  );
}

export default App;

若需动态生成混合内容 #

如果你的内容是动态生成的（比如从后端获取包含HTML、公式标记和变量占位符的字符串），可以先把字符串拆分，识别出不同部分：

• 把纯HTML片段提取出来用dangerouslySetInnerHTML渲染
• 把公式标记替换成<MathJax.Node>组件
• 把变量占位符替换成对应的动态变量值

你可以写一个简单的处理函数，根据约定的标记来拆分内容，再动态生成JSX元素。

注意事项 #

• dangerouslySetInnerHTML存在XSS风险，务必确保传入的HTML内容是完全可信的，绝对不能直接使用未过滤的用户输入内容。
• 永远不要尝试在__html字符串里写React组件，React不会解析这部分内容，只会把它们当作无效HTML标签忽略。

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