我正在用react spring和usemesure制作 accordion 的动画。一切都很好，动画正在运行，但页面上有多个 accordion 。打开数字1将使页面滚动。为什么？因为尽管父对象的高度为0且溢出隐藏，但其内部的子对象的高度应测量为动画，因此打开顶部的子对象显然会使侧边栏高度超过100vh，并使页面滚动。

代码如下：

// Collasable which could be used for an Accordion
export const Collapsable: FC<CollapsableProps> = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const { height } = useSpring({
    height: isOpen ? viewHeight : 0,
  });

  return (
    <CollapseRoot>
      <CollapseButton
        isOpen={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        {title}
        <ArrowUpSmall className="icon" />
      </CollapseButton>
      <Content
        style={{
          height,
        }}
      >
        {children}
      </Content>
    </CollapseRoot>
  );
}

// content styles with styled-components
const Content = styled(animated.div)`
  overflow: hidden;
`;

// usage of Collapsable
const ModuleConfig = () => {
  const [publishRef, { height: publishHeight }] = useMeasure();
  return (
    <Collapsable title="انتشار" height={publishHeight}>
      <div ref={publishRef}>
        {/* contents inside collapsable like some forms or anything */}
      </div>
    </Collapsable>
  )
}

注意：代码不是1对1匹配。只是重要的部分