发生了什么，我收到了使用 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>"

经过长时间的调试会话，在清理期间，使用<span>代替<p>是解决方案

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

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

Answer 1

我也遇到了同样的问题，因为在 中richtext我也得到了<p>标签，所以当我将包装标签从 切换为 时，<p>该<div>错误消失了。

Answer 2

这取决于richText来自哪里。是否有可能在服务器端渲染，richText = ""然后在前端发出一些 API 请求来设置 richText 的值？