Antd 弹出窗口根据操作执行的顺序以两种不同的宽度打开

Question

抱歉，如果标题令人困惑，我不知道还能用什么语言来表达。

我目前正在学习 React 并使用antd UI 组件制作了这个应用程序。我有这个功能，可以在购物车中添加和删除商品。

我正在使用弹出窗口来列出购物车项目，一旦它们被添加到购物车。弹出窗口以两种不同的宽度打开，具体取决于我在应用程序中执行操作的顺序。

如果我在向购物车添加任何东西之前打开购物车，则购物车会在狭窄的容器中打开，购物车中没有任何内容。如果我之后添加任何东西到购物车。那么购物车就会变得很窄，无法正确容纳所有东西。

现在重新加载页面

在打开弹出窗口之前将商品添加到购物车。现在您可以看到弹出框更宽，可以正确容纳所有内容。

我该如何解决这个问题？

可重现的示例：代码沙箱链接

github：https: //github.com/nijeesh4all/reactShopping

Answer 1

我们可以使用overlayStyle属性来给出固定的宽度和高度，如下所示：

<Popover
  visible={true}
  overlayStyle={{
    width: "20vw"
  }}
  content={<div>HELLO</div>}
>
  hello
</Popover>

Answer 2

感谢Reddit 上的u/jnforja。

<Popover      
placement="bottom"      
title="YOUR CART"      
content={listContent}      
trigger="click"      
key={this.boughtItems() > 0}>

将项目添加到弹出窗口后更改密钥似乎可以解决问题。

在我看来，发生的事情应该被视为弹出组件上的错误。第一次点击购物车之前，DOM 中不存在 popover 元素。用户第一次单击后，将创建弹出框 DOM 元素并将其定位在屏幕中，同时考虑内容的当前尺寸。即使内容发生变化，创建的 DOM 元素也会被重用。但是，当内容更改时，尺寸和位置不会正确重新计算（我不确定的原因）。因此，当我们从一个空列表更改为至少包含一项的列表时，结果就是我们所看到的。

解决此问题的一种解决方案是告诉 React 不要重用它创建的 dom 元素。我们可以通过 key 属性来做到这一点。因为，据我所知，我们可以在有 1 个或多个元素的情况下重复使用 popover dom 元素，因此我在这些情况下将 popover 键设置为相同。因此，表达式this.boughtItems() > 0

如果你想了解更多关于 key 属性的信息，可以阅读 React文档的这一部分。

这是自我推销，但我写的关于使用关键属性在变化时对图像进行动画处理的这篇文章也可能会帮助您了解此关键属性的工作原理。