如何在不使用「dangerouslySetInnerHTML」的情況下安全地在 React 中渲染原始 HTML？

使用更安全的方法在React 中渲染原始HTML

在React 中，您現在可以使用更安全的方法渲染原始HTML ，避免使用危險的SetInnerHTML 。這裡有四個選項：

1。 Unicode 編碼

使用Unicode 字元表示UTF-8 編碼檔案中的HTML 實體：

<div>{`First \u00b7 Second`}</div>

2. JSX 字串中的Unicode 數字

將HTML 實體轉換為JSX 字串中的Unicode 數字：

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3。字串和JSX 元素的混合陣列

組合字串和JSX 元素來渲染複雜的HTML：

<div>{[`First `, <span>&middot;</span>, ` Second`]}</div>

4. DangerouslySetInnerHTML 作為最後的手段

4. DangerouslySetInnerHTML 作為最後的手段

4. DangerouslySetInnerHTML 作為最後的手段

<div dangerouslySetInnerHTML={{__html: `First &middot; Second`}} />

4. DangerouslySetInnerHTML 作為最後的手段4. DangerouslySetInnerHTML 作為最後的手段僅使用angerouslySetInnerHTML 作為最後的手段，因為它會引入潛在的安全漏洞：

以上是如何在不使用「dangerouslySetInnerHTML」的情況下安全地在 React 中渲染原始 HTML？的詳細內容。更多資訊請關注PHP中文網其他相關文章！