React分类下拉菜单如何实现列无间距紧密对齐？

你的问题核心是Row和Col的布局逻辑导致子项较少时出现空白间距，以下是具体的修复方案：

问题根源 #

1. 你给Row设置了固定宽度600px，但Col未设置自适应内容的宽度属性，Ant Design的Col默认会尝试分配栅格空间，导致空白出现。
2. 多层map循环中重复使用同一个index作为key，这是React渲染的潜在隐患，可能导致组件更新异常。

修复方案 #

修改Row和Col的样式，让Col宽度跟随内容自适应，同时调整Row的布局行为：

function CategoryDropDown() {
  return (
    <>
      {categories.length > 0 &&
        categories.map((category, catIndex) => {
          return (
            <NavDropdown key={catIndex} title={category.name}>
              <Row
                style={{
                  margin: "10px",
                  flexWrap: "wrap",
                  // 可选：设置列之间的自定义间距，不需要则删除
                  gap: "12px",
                }}
              >
                {category.children?.map((subCategory, subIndex) => {
                  return (
                    <Col 
                      key={subIndex} 
                      style={{ 
                        textAlign: "center",
                        width: "fit-content",
                        whiteSpace: "nowrap",
                      }}
                    >
                      <b>{subCategory.name}</b>
                      {subCategory.children?.map((s, sIndex) => {
                        return <div key={sIndex}>{s.name}</div>;
                      })}
                      <hr style={{ margin: "8px 0" }} />
                    </Col>
                  );
                })}
              </Row>
            </NavDropdown>
          );
        })}
    </>
  );
}

关键调整说明 #

• 去掉Row的固定宽度，让它由内容自动撑开，避免强制宽度导致的空白。
• 给Col设置width: fit-content，让列宽度完全匹配内部内容，不再占用多余空间。
• 为Row添加flexWrap: wrap，确保子项过多时自动换行。
• 替换多层map中的重复key，每层使用独立的索引变量，避免渲染冲突。
• 调整hr的margin，让分类块内部更紧凑。

可选优化 #

如果需要保留Row的固定宽度，同时让列尽可能紧密排列，可以把Col的width: fit-content换成flex: 0 0 auto，效果一致；若想让列之间完全无间距，删除Row的gap属性即可。

内容的提问来源于stack exchange，提问作者Srivatsa