/

如何解決 React 中的 \"dangerouslySetInnerHTML 錯誤未匹配\" 問題

如何解決 React 中的 “dangerouslySetInnerHTML 錯誤未匹配” 問題

在這篇文章中，我將告訴你如何解決 React 應用程式中的 “dangerouslySetInnerHTML 錯誤未匹配” 問題。

我嘗試使用 dangerouslySetInnerHTML 來輸出包含在屬性中的 HTML 字符串，但卻在瀏覽器控制台中看到以下錯誤訊息：

1
警告：屬性 `dangerouslySetInnerHTML` 未匹配。

此問題出現在 Next.js 專案中，但解決方法同樣適用於任何 React 代碼。

我嘗試輸出一個固定的 HTML 字符串，如下所示：

1
2
3
4
<p
 dangerouslySetInnerHTML={{
 __html: '<p>test</p>'
 }}></p>

這個錯誤訊息看起來很嚴重，但過了一會兒，我才意識到我不能在一個 p 標籤中設置另一個 p 標籤。

最後，我將代碼改為：

1
2
3
4
<div
 dangerouslySetInnerHTML={{
 __html: '<p>test</p>'
 }}></div>

問題迎刃而解。

tags: [“React”, “Next.js”, “dangerouslySetInnerHTML”]