Css 如何使用React+；初始服务器端渲染后的NextJS？

我使用Next.js和React创建了一个网站，我非常喜欢声明一个js变量来定义组件样式，如下所示：

const foo = {
  fontSize: '12px',
};

render() {
  return (
    <div>
      <style>
        .foo {
          font-size: '12px';
        }
      </style>
      <div className="foo">bar</div>
    </div>
  );
}

在渲染方法中，我执行以下操作：

render() {
  return (
    <div style={foo}>bar</div>
  );
}

render（）{
返回(
酒吧
);
}

使用ESLint，我可以快速找到未使用的样式/变量（如果引用消失了），并保持代码干净。因此，我不使用

或类似的方法：

const foo = {
  fontSize: '12px',
};

render() {
  return (
    <div>
      <style>
        .foo {
          font-size: '12px';
        }
      </style>
      <div className="foo">bar</div>
    </div>
  );
}

render（）{
返回(
傅先生{
字体大小：“12px”；
}
酒吧
);
}

问题 仅使用js变量而不是

的问题在于，我无法将媒体查询应用于不同的屏幕大小，因此我认为可以使用javascript解决这个问题：

render() {
  // Bigger font size for smaller devices
  if (windowWidth < 768) foo.fontSize = '24px';

  return (
    <div style={foo}>bar</div>
  );
}

render（）{
//较小设备的较大字体大小
如果（windowWidth<768）foo.fontSize='24px'；
返回(
酒吧
);
}

我通过以下解决方法获得

windowWidth

：。只要在客户机上进行渲染，这就可以很好地工作。这种方法的问题是Next.js将首先在服务器端呈现视图。此时，窗口/屏幕大小未知，因此

windowWidth=0

。因此，我认为客户端必须在从服务器接收到初始呈现页面后重新呈现

问题:

如何强制客户端在服务器进行初始渲染后立即重新渲染，以确定

windowWidth

的值

这是一个好的实践/解决方案，还是会导致性能问题或元素闪烁

---

在reactjs中随时触发渲染的最佳方法是使用该属性创建react元素。在您的情况下，我将首先计算要使用的字体大小，然后使用该属性创建元素。
字体大小似乎不会改变，但如果改变了，您可能必须将此状态放在使用它的元素的公共父元素中。这位家长会接受这种状态，并把它作为道具送给孩子们

---

正如一位评论员所建议的，有几种触发更新的方法，但最好通过正常的react方法重新组织元素。不要害怕制造更小的元素

找到了解决方法。在执行服务器端渲染后，NextJS将自动重新渲染客户端。添加一些控制台输出将显示以下内容：

const foo = {
  fontSize: '12px',
};

渲染方法：

render() {
  if (windowWidth < 768) {
    foo.fontSize = '24px';
    console.log('24px');
  } else {
    console.log('12px');
  }

  return (
    <div style={foo}>bar</div>
  );
}

但是，按浏览器的“重新加载”按钮，字体大小不会改变，尽管样式变量的值已明显改变

解决方案是创建原始对象的副本，并对其进行操作：

render() {
  let foo2;
  if (windowWidth < 768) {
    foo2 = Object.assign({}, foo, { fontSize: '24px' });
  } else {
    foo2 = Object.assign({}, foo);
  }

  return (
    <div style={foo2}>bar</div>
  );
}

render（）{
让我们来看看2；
如果（窗宽<768）{
foo2=Object.assign（{}，foo，{fontSize:'24px'}）；
}否则{
foo2=Object.assign（{}，foo）；
}
返回(
酒吧
);
}

---

这将在运行时更改字体大小。但是，当页面加载时，您将在几秒钟内看到旧的12px字体大小，当客户端渲染完成时，它将跳转到新的24px字体大小。不确定我是否会从用户体验的角度来考虑这个问题，但从技术上来说，这是一个可行的解决方案。尽管如此，我还是不太喜欢：-（

您有没有考虑过在顶级组件中使用它？不过，我认为您将遇到2中列出的两个问题。）根据您编写样式的方式…如果是“移动优先”，它们将闪烁，可能会触发桌面上的布局重绘，反之亦然。您可以尝试在页面上隐藏响应元素，并仅在更新后显示。您是否使用过componentWillMount lifecycle？？应该行得通