如何修复React中`dangerouslySetInnerHTML`不匹配的错误

看看我是如何解决React应用程序中的错误"`dangerouslySetInnerHTML`不匹配 "的。

我试图打印一个道具中包含的HTML，使用dangerouslySetInnerHTML ，而我在浏览器控制台中得到了这个错误。

Warning: Prop `dangerouslySetInnerHTML` did not match.

这是一个Next.js项目，但该解决方案适用于任何React代码。

我试图打印的字符串出现了一段时间，然后就消失了。相当奇怪！当我试图打印时，更奇怪了。

当我试图打印一个固定的HTML字符串时，情况就更奇怪了，就像这样。

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

错误信息很隐晦，但过了一会儿，我意识到我不能在另一个p 标签内设置一个p 标签。

换成了。

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

工作起来非常顺利。