我使用 Next.js 收到危险的SetInnerHTML 警告和空内容，这是怎么回事？答案

【问题标题】：What is happening such I receive dangerouslySetInnerHTML warning and empty content using Next.js?我使用 Next.js 收到危险的SetInnerHTML 警告和空内容，这是怎么回事？
【发布时间】：2020-02-04 13:27:03
【问题描述】：

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

所以我创建了一个 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
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

嵌套 p 标签是一个错误，无论如何，发生了什么导致 Next.js 无法呈现此特定内容，从而导致空字符串 Server: ""？ Next.js 只是对错误和警告非常敏感吗？

【问题讨论】：

Nested p tags was a mistake… 谢谢，解决了我的问题！

标签： reactjs next.js server-side-rendering

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

不，这也是我最初的想法，但richText 在服务器端不是空字符串。我在getInitialProps 中拨打电话，我 100% 确定它不是空字符串。

【解决方案3】：

Material-UI 有一个叫做组件的道具。使用组件作为div

<Typography {...other Typography Props} component="div" dangerouslySetInnerHTML={{
    __html: richText
  }}/>

【讨论】：

【解决方案4】：

我遇到了同样的问题，我使用 react useState 和 useEffect 钩子解决了这个问题。所以它不会在服务器中呈现。

import { useState, useEffect } from 'react';

export default function ParentComponent({ content }) {
   const [render, setRender] = useState(false);
   
   useEffect(() => {
      setRender(true);
   }, []);

   return <Typography dangerouslySetInnerHTML={{ __html: render && content }} />
}

【讨论】：