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

Question

对不起，如果标题令人困惑，我不知道如何用文字来表达。

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

将购物车添加到购物车后，我正在使用弹出框列出购物车项目。根据我在应用程序中执行操作的顺序，弹出框以两种不同的宽度打开。

如果我在将任何东西添加到购物车之前打开购物车，购物车会在狭窄的容器中打开，购物车中没有任何内容。如果我在那之后添加任何东西到购物车。然后推车保持狭窄并且不能正确安装所有东西。

现在重新加载页面

在打开弹出框之前将项目添加到购物车。现在您可以看到弹出框更宽，并且可以正确容纳所有内容。

我该如何解决这个问题？

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

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

标签： javascripthtmlreactjspopoverantd

Answer 1

感谢reddit 上的u/jnforja。

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

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

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

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

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

这是自我推销，但我写的这篇关于使用关键属性在更改时为图像设置动画的文章也可能有助于您了解这个关键属性是如何工作的。