如何在 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>