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

Question

dangerouslySetInnerHTML 正在正确转换 static html 内容，但它无法评估表达式。

output：

如何使用 dangerouslySetInnerHTML 评估表达式？

Answer 1

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

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

它使用正则表达式来查找 { 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>