React中如何让获取的HTML模板通过反引号实现字符串插值？

核心问题 #

从Firebase Storage获取的HTML是普通字符串（比如<h1>${name}</h1>），并非JS的模板字符串，直接渲染会原样显示${name}，无法自动替换为变量值。

解决方案 #

方案1：手动替换占位符（推荐，安全性高） #

如果模板中的变量是已知的，直接用字符串替换方法批量处理所有占位符：

// 单变量替换示例
const name = 'React';
// 假设axios.get返回内容为'<h1>${name}</h1>'
const rawHtml = await axios.get(url);
const processedHtml = rawHtml.replace(/\$\{name\}/g, name);

return (
  <div dangerouslySetInnerHTML={{ __html: processedHtml }} />
);

多变量批量替换：

const templateVars = {
  name: 'React',
  age: '28',
  job: '前端开发者'
};
const rawHtml = await axios.get(url);
let processedHtml = rawHtml;

// 遍历变量，替换对应占位符
Object.entries(templateVars).forEach(([key, value]) => {
  // 转义正则特殊字符，避免变量名含特殊符号时出错
  const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  processedHtml = processedHtml.replace(new RegExp(`\\$\\{${escapedKey}\\}`, 'g'), value);
});

return (
  <div dangerouslySetInnerHTML={{ __html: processedHtml }} />
);

方案2：用new Function动态执行（注意安全风险） #

如果模板变量较多或不确定，可通过new Function将字符串转为模板字符串执行，但仅适用于模板内容完全可信的场景（比如自己上传的模板），否则可能引发XSS攻击：

// 单变量场景示例
const name = 'React';
const rawHtml = await axios.get(url);
// 创建接收变量的函数，返回处理后的HTML
const renderTemplate = new Function('name', `return \`${rawHtml}\``);
const processedHtml = renderTemplate(name);

return (
  <div dangerouslySetInnerHTML={{ __html: processedHtml }} />
);

多变量场景：

const templateVars = {
  name: 'React',
  age: '28'
};
const rawHtml = await axios.get(url);

// 提取变量名和对应值
const [paramNames, paramValues] = [Object.keys(templateVars), Object.values(templateVars)];
// 创建动态函数，传入所有变量并返回处理后的HTML
const renderTemplate = new Function(...paramNames, `return \`${rawHtml}\``);
const processedHtml = renderTemplate(...paramValues);

return (
  <div dangerouslySetInnerHTML={{ __html: processedHtml }} />
);

注意事项 #

• 优先选择方案1：手动替换无需执行动态代码，安全性更高，适合大多数场景。
• 方案2需谨慎使用：如果模板内容来自用户上传或其他不可信渠道，绝对不能用new Function，否则可能被注入恶意代码。

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