reactjs - 发生了什么，我收到了使用 Next.js 的危险的SetInnerHTML 警告和空内容？

Question

首先，我知道我不应该嵌套 <p>标签。

所以我创建了一个 Next.js 应用程序，我有一个设置富文本 html 的组件，如下所示:

    <Typography
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

react 组件 Typography只是一个 p标记在最后，所以这可以简单地写为:

    <p
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

所以当浏览器加载页面时，我的内容没有显示出来，我留下了控制台警告:

Warning: Prop 'dangerouslySetInnerHTML' did not match. Server: "" Client: "<p>...</p>"

经过长时间的调试 session ，在清理期间，使用 <span>而不是 <p>是解决方案

    <span
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

嵌套的 p 标签是一个错误，不管发生了什么使 Next.js 不呈现此特定内容导致空字符串 Server: "" ? Next.js 只是对错误和警告非常敏感吗？

Answer 1

我遇到了同样的问题，因为在 richtext 中我收到 <p>标签也是如此，所以当我从 <p> 切换我的包装标签时至 <div>那个错误消失了。