React如何将组件Props/State传递给渲染的HTML字符串？

嘿，这个问题我之前碰到过不少开发者问，核心点在于你用的dangerouslySetInnerHTML和ReactDOMServer.renderToString()本质上都是把字符串当成纯静态内容插入DOM，不会触发React的JSX模板解析逻辑——毕竟React的JSX编译是在构建阶段完成的，客户端拿到现成的HTML字符串后，只会原封不动地渲染，根本不会把里面的{props.text}当成组件的Props引用处理。

那该怎么解决呢？给你几个实用的方案：

1. 手动模板变量替换（简单场景首选） #

如果你的模板里只是简单的变量占位（比如{text}、{username}这类），最直接的办法就是在客户端拿到HTML字符串后，手动把占位符替换成State/Props的真实值。

举个例子：

function ParentComponent({ userText }) {
  // 服务器返回的HTML模板字符串
  const serverTemplate = "<div>你好，{userText}！这是服务器传来的模板内容</div>";
  // 替换占位符为Props的值
  const renderedHtml = serverTemplate.replace(/\{userText\}/g, userText);
  
  return <div dangerouslySetInnerHTML={{ __html: renderedHtml }} />;
}

这种方法简单粗暴，适合占位符数量少、逻辑简单的场景，缺点是没法处理复杂的条件渲染、循环这类逻辑。

2. 使用成熟的模板引擎（复杂场景推荐） #

如果你的模板有更复杂的逻辑（比如条件判断、列表循环），可以让服务器存储模板引擎语法的字符串（比如Mustache、Handlebars），客户端拿到后用对应的库渲染成带Props值的HTML，再插入到React组件里。

比如用Mustache的例子：

import Mustache from 'mustache';

function ParentComponent({ user }) {
  // 服务器返回的Mustache模板
  const serverTemplate = "<div>你好，{{name}}！你的等级是{{level}}</div>";
  // 用Props数据渲染模板
  const renderedHtml = Mustache.render(serverTemplate, user);
  
  return <div dangerouslySetInnerHTML={{ __html: renderedHtml }} />;
}

这种方式能处理复杂逻辑，而且比自己写解析器安全可靠得多。

3. 动态生成React元素（完全联动场景） #

如果想要模板内容完全和React的State/Props联动（比如State更新时模板内容自动刷新），那最好别存纯HTML字符串，而是让服务器存储可执行的组件配置或者JSX片段代码（注意：这种方式要严格校验服务器传来的内容，防止XSS攻击）。

比如服务器返回类似这样的配置：

{
  "type": "div",
  "children": ["你好，", { "type": "span", "props": { "children": "{{userText}}" } }]
}

然后客户端写一个解析函数，把配置转换成React元素，同时注入Props值：

function renderConfig(config, props) {
  if (typeof config === 'string') {
    // 替换字符串里的占位符
    return config.replace(/\{\{(\w+)\}\}/g, (_, key) => props[key]);
  }
  return React.createElement(
    config.type,
    config.props,
    config.children?.map(child => renderConfig(child, props))
  );
}

function ParentComponent({ userText }) {
  const serverConfig = { /* 服务器返回的配置 */ };
  return renderConfig(serverConfig, { userText });
}

这种方式能让模板完全融入React的生命周期，State更新时模板内容也会自动刷新，但实现成本较高，还要注意安全问题。

总结一下：简单变量替换用第一种，复杂模板逻辑用第二种，要完全和React状态联动就用第三种。根据你的实际场景选就行～

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