服务端渲染和客户端渲染className不匹配?

需求是这样的:要根据浏览器是否出现滚动条给元素赋予不同的className

<div className={isScroll?'a b':'a'}>abc</div>

但判断是否出现滚动条只能在客户端实现,这就造成了客户端和服务端的className不同,出现以下警告:

Prop className did not match. Server: "a" Client: "a b"

求解这种情况如何处理呢?(react的SSR)

阅读 372
评论 2019-12-30 提问
    3 个回答
    Meathill
    • 8.9k

    逻辑有问题,是否有滚动条只能渲染完再判断,浏览器也存在分辨率差异,有些有滚动条有些没有。

    评论 赞赏 2019-12-30

      使用client-only包裹 仅在客户端渲染

      评论 赞赏 2019-12-30
        nero
        • 2.9k

        可不可以将判断isScroll的逻辑放在一个setTimeout中,强制将判断变为异步,这样应该就能保证当客户端开始渲染的时候,没有马上就计算isScroll的值,这样两端就会一样了。而异步线程执行完之后才会改变className。可以这样试试行不行

        评论 赞赏 2019-12-30
          撰写回答

          登录后参与交流、获取后续更新提醒