react路由匹配_如何修复`dangerouslySetInnerHTML`与React中的错误不匹配

react路由匹配

I was trying to print the HTML contained in a prop, using dangerouslySetInnerHTML, while I got this error in the browser console:

当我在浏览器控制台中收到此错误时，我尝试使用dangerouslySetInnerHTML设置InnerHTML来打印道具中包含HTML：

Warning: Prop `dangerouslySetInnerHTML` did not match.

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

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

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:

当我尝试打印固定HTML字符串时，甚至更陌生：

<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.

该错误消息是神秘的，但一段时间后，我意识到我不能设置一个p另一个标记内p标签。

Switching to:

切换至：

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

worked like a charm.

像魅力一样运作。

翻译自: https://flaviocopes.com/react-fix-dangerouslysetinnerhtml-did-not-match/

react路由匹配