0

isMobile使用库中的属性react-device-detect进行条件渲染时会发生此错误。

为了解决这个错误，我使用创建了一个新的下一个应用程序npx create-next-app，然后react-device-detect使用 npm 安装了该软件包。然后我只是用这个替换了 index.js：

    import {
      BrowserView,
      MobileView
    } from 'react-device-detect'
    
    export default function Home() {
      return <div>
        <BrowserView>Hello</BrowserView>
        <MobileView>World</MobileView> 
      </div>
    }

当我启动开发服务器并在桌面上打开页面时，我看到 Hello 并且没有错误。但是当我在手机上使用 Safari 时，我看到了 World，但我可以在开发工具中看到我也收到以下警告消息：

Warning: Text content did not match. Server: "Hello" Client: "World"
div
MobileView
div
Home
MyApp
PureComponent
ReactDevOverlay
_classCallCheck
AppContainer
Root

我读过一些关于水合作用的文章，发现我可以添加 suppressHydrationWarning 属性来抑制这个警告，但这是我应该在这里做的，还是我不明白什么？

4

1 回答 1

0

警告是说服务器端呈现的内容与客户端呈现的内容不同。由于这种情况的发生违背了服务器端渲染的目的，这就是它警告你的原因。如果您无法检测到设备和服务器端，则您无能为力，可以决定忽略警告。这不是世界末日，但可能会对 SEO 产生负面影响并导致一些内容闪烁。

一些可能性可能是：

  1. 通过分析用户代理属性对服务器端的用户设备进行有根据的猜测（我认为一些库可以提供帮助）

  2. 考虑使用 CSS 媒体查询来管理向用户显示的内容（如果您关心的是屏幕大小而不是设备类型）。它可能会使事情变得更简单。

于 2022-02-11T20:10:57.807 回答