我正在使用Next.js和react-spring库来获得一个bottomsheet组件的动画，它可以工作，但是会出现一个警告：

警告：属性style不匹配。服务器："转换：转换3d（0，无限类型x，0）"客户端："转换：三维平移（0，652px，0）"

我仔细研究了这个警告，知道它是关于HTML元素在服务器端和客户端的不正确呈现。很明显，在服务器端没有viewport height，因此react-spring无法正常计算最终值和Next。JS用Infinity将其注册为1值，然后当由于可用的视口高度而正确计算了该值时，在客户端侧进行责备。

• 我想知道什么是最好的方法来消除这个错误？* 不幸的是，我不能赶上反作用Spring计算阶段，并设置一个正确的值。没有API来做这件事，基本上我只是不知道用户的视口高度。

我考虑过使用indexOf作为值，检查Infinity是否存在，并将其替换为例如：通过0
然而，它仍然没有解决问题，因为最终值无论如何都是不同的。
也许有人有一个想法或一些链接到文档等，我可以找到一个解决方案？
基本上这只是一个警告，但我想修复它无论如何。
下面是示例代码：

import { a, config, useSpring } from '@react-spring/web';

export function BottomSheet({propsHeight}) {
  const finalHeight = propsHeight || height - 62;
  const display = y.to((py) => (py < finalHeight ? 'flex' : 'none'));
  const [{ y }, api] = useSpring(() => ({ y: finalHeight }));

  const open = (dragEvent?: any) => {
    const canceled = dragEvent?.canceled;
    // when cancel is true, it means that the user passed the upwards threshold
    // so need to change the spring config to create a nice wobbly effect
    api.start({
      y: 0,
      immediate: false,
      config: canceled ? config.wobbly : config.stiff,
    });
  };

  const close = (velocity = 0) => {
    api.start({
      y: finalHeight,
      immediate: false,
      onResolve() {
        if (onClose) {
          onClose();
        }
      },
      config: { ...config.stiff, velocity },
    });
  };

  useEffect(() => {
    // provide open/close actions to parent control
    getActions(open, close);
  }, []);

  // pseudo hmtl. Removed all other markup to simplify things
  return (<a.div
    style={{
      y, // Here is the problem of the server & client incorrect values
    }}
  />)

}

我非常感谢任何帮助!
此致