如何在 React 中使用危险的 SetInnerHTML 解析 Jsx 字符串？

【问题标题】：How to parse Jsx String with expressions using dangerouslySetInnerHTML in React?如何在 React 中使用危险的 SetInnerHTML 解析 Jsx 字符串？
【发布时间】：2021-06-08 19:11:06
【问题描述】：

dangerouslySetInnerHTML 正在正确转换静态 html 内容，但无法计算表达式。

输出：

如何使用 dangerouslySetInnerHTML 来评估表达式？

【问题讨论】：

Please see why we shouldn't post images of text :)

标签： javascript reactjs react-native react-redux react-hooks

【解决方案1】：

您可以将{some expression} 替换为评估的内容。

以下示例使用string-math 将模板html 转换为预期结果。您的实现将为 dangerouslySetInnerHTML 执行此转换。

它使用正则表达式来查找 { something }。需要.slice(1, -1) 来分割{ 和}。

const templateStr = '<h2>Math --> {1 + 1}</h2>'

document.getElementById('div').innerHTML = templateStr.replace(/{[^}]+}/g, str => stringMath(str.slice(1, -1)))

<script src="https://cdn.jsdelivr.net/npm/string-math@1.2.2/string-math.js"></script>
<div id='div'></div>

【讨论】：