0

我想让我的元素动态地将其高度从初始更改为 0px，但由于填充，它似乎无法正常工作。我不能说我做错了什么。

我不想使用：显示：阻止或隐藏可见性。当高度为 0 时，我不想从样式中删除填充，因为它使这个逻辑过于复杂。我希望我在这里做一些愚蠢且容易修复的事情，这就是它不起作用的原因。有任何想法吗？

在此处输入图像描述

我正在添加它以获得更多上下文。它是反应。我已经简化了代码——但这是基本的想法。我想让这个模式调整大小。所以我有 ：

const StyledModal = styled.div<ModalProps>`
  box-sizing: border-box;
  position: fixed;
  z-index: 9000;
  background-color: white;
  height: ${({ height }) => `${height}px`};
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 3.4rem 0 3.2rem 0;
`
const Modal = ({children}) => {
  const [height, setHeight] = useState(0)
  useEffect(() => { 
    setHeight(ref && 
    ref.current && 
    ref.current.getBoundingClientRect().height)
  }, [])

  const reduceHeight = () => setHeight(0) 
  return <StyledModal 
          onClick={reduceHeight} 
          height={height}>{children}</StyledModal>

}

问题是，即使我在 web 开发人员工具中手动将高度设置为 0px，这个元素仍然存在，因为这个填充就像上面的屏幕截图一样。

4

0 回答 0