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

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

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

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

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

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

阅读 777
评论
    4 个回答
    • 12.1k

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

      • 7.5k

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

        • 3.3k

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

          • 1
          • 新人请关照

          可以把 isScroll放在react的render完成的时候去做这件事 否则二次渲染不一致 不仅会抛出错误还会导致样式错乱

            撰写回答

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