时间戳

首页 > 解决方案 > 发生了什么，我使用 Next.js 收到危险的SetInnerHTML 警告和空内容？

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

问题描述

首先，我知道我不应该嵌套<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 只是对错误和警告非常敏感吗？

标签： reactjsnext.jsserver-side-rendering

解决方案

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

推荐阅读