React中为运动类别列表每项添加自定义背景的实现问题

现存问题定位 #

• 布局方向错误：.categories容器设置为纵向弹性布局，所有运动标签会从上到下纵向堆叠，和预期的横向排列效果不符
• 圆形标签样式失效：.fsubcategory采用块级展示，默认占满父容器全宽，即使设置50%圆角也无法生成正圆形
• 基础展示缺失：标签内部未配置文字居中规则、标签间距、差异化背景色，视觉效果和预期偏差较大
• 列表渲染隐患：map生成的列表项未配置唯一key属性，存在列表动态更新时的渲染异常风险

修正实现代码 #

React 组件调整 #

const SportFav = ({ categories }) => (
    <div className="fcontactinfo">
        <div className="categories">
            {categories.map((sport) => (
                <div className="fsubcategory" key={sport}>{sport}</div>
            ))}
        </div>
    </div>
)

class Test extends Component {
    render() {
        return (
            <div className="page">
                <SportFav
                    categories={["running", "swimming", "tennis"]}
                />
            </div>
        );
    }
}

Sass 样式调整 #

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ddd;
  padding-top: 20px;
}

.fcontactinfo {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    padding: 24px;

    .categories {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
        justify-content: center;

        .fsubcategory {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 50%;
        padding: 8px;
        color: #fff;
        text-align: center;

        &:nth-child(1) {
            background-color: #4285F4;
        }
        &:nth-child(2) {
            background-color: #34A853;
        }
        &:nth-child(3) {
            background-color: #FBBC05;
        }
        }
    }
}

实现效果说明 #

调整后的代码可完全匹配参考要求的展示效果：

• 三个运动标签横向均匀排列在白色圆角卡片内
• 每个标签为标准正圆形，内部文字水平垂直居中
• 不同标签使用高区分度的柔和背景色，文字和背景对比度符合可读性要求
• 标签间保持统一间距，无重叠或挤压问题

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