如何修復`dangerouslySetInnerHTML`與React中的錯誤不匹配

找出我如何解決錯誤“dangerouslySetInnerHTML不匹配”,在React應用程序中

我正在嘗試使用以下方法打印道具中包含的HTMLdangerouslySetInnerHTML,雖然我在瀏覽器控制台中遇到此錯誤:

Warning: Prop `dangerouslySetInnerHTML` did not match.

This was a Next.js project, but the solution applies to any React code.

The string I was trying to print appeared for a while, and then disappeared. Quite strange!

It was even stranger when I tried to print a fixed HTML string, like this:

<p
  dangerouslySetInnerHTML={{
    __html: '<p>test</p>'
  }}></p>

The error message is cryptic but after a while, I realized I could not set a p tag inside another p tag.

Switching to:

<div
  dangerouslySetInnerHTML={{
    __html: '<p>test</p>'
  }}></div>

worked like a charm.

Download my free React Handbook


More react tutorials: