javascript - Antd下拉悬停问题

Question

我正在使用DropDownant设计库并循环遍历DropDown数组。悬停动作仅适用于最后一项。代码如下：这catNavItems是一个array. 例如['Furniture', 'Cushions', 'Blankets']

{_.map(catNavItems, function(item, key){
            return <Dropdown
                    overlayClassName="shop-navigation cat-nav"
                    overlay={catMenu}
                    trigger={["hover"]}
                    onVisibleChange={() => handleVisibleChangeCat(!catNavVisible, item)}
                    getPopupContainer={(trigger) => trigger.parentElement}
                    visible={catNavVisible}
                    overlayStyle={{ width: "100%", cursor: "pointer" }}
                  >
                    <div
                      className={
                        catNavColor
                          ? "shop my-account-header qa-cursor qa-hover"
                          : "shop my-account-header qa-cursor"
                      }
                      style={{
                        verticalAlign: "middle",
                        marginLeft: "20px",
                        marginRight: "20px",
                        height: "40px",
                        lineHeight: "40px",
                      }}
                      // onClick={() => {
                      //   router.push("/products/all-categories");
                      // }}
                    >
                      {item}
                    </div>
                  </Dropdown>
          })}

请建议是否有人可以在这里提供帮助。提前致谢 ：）

标签： javascriptreactjsantd