时间戳

首页 > 解决方案 > material-ui中的隐藏组件，如何防止渲染？

reactjs - material-ui中的隐藏组件，如何防止渲染？

问题描述

到目前为止，我一直在使用 nextJS 和 material-ui 并取得了巨大的成功。
但是我最近遇到了一个概念问题：
每当应用程序在服务器上呈现时，我不希望它在到达客户端后重新流动。
由于我在桌面设备和移动设备之间呈现不同的布局，因此我一直在使用组件来分离<Hidden implementation='css'/>组件。我正在使用implementation=css，因为我不能依赖窗口宽度，因为它在服务器上不可用。
我今天的主要问题是桌面版和移动版都渲染了，即使屏幕上显示了正确的，也会导致不必要的逻辑执行（尤其是api调用）。
我想我做错了什么，但不知道如何解决。
“理想”的方式将是一个组件，<Hidden/>但不仅仅是隐藏一个已经渲染的组件，它根本不会渲染它......我window.innerWidth当然不能使用，因为我关心 SSR......

如果有人有想法，我将不胜感激。

标签： reactjsmaterial-uinextjs

解决方案

所以，我终于找到了一个不是完美的解决方案，而是我的情况的最佳解决方案：
当渲染在服务器端完成时，我使用的是 material-ui <Hidden implementation='css'/>（同样可以使用媒体查询反应组件来实现），这样组件渲染桌面版和移动版，然后立即隐藏右侧（屏幕上没有 flickr）。
然后当渲染完成客户端时，我正在计算window.innerWidth，以便组件不会为每个状态更改重新计算移动和桌面版本。
这是我的代码：

<Fragment>
  <Display format="mobile" css>
    {process.browser
      ? this.state.width < 960 ? mobile() : null
      : mobile()}
  </Display>
  <Display format="tablet-desktop" css>
    {process.browser
      ? this.state.width >= 960 ? tablet_desktop() : null
      : tablet_desktop()}
  </Display>
</Fragment>

推荐阅读