React组件如何以数组形式传递多样式变体作为Props？

修改后的Button组件代码 #

import React from "react";
import styles from "./button.module.scss";
import Link from "next/link";

const {
  buttonPrimary,
  buttonSecondary,
  buttonTertiary,
  smallButton
} = styles;

export const Button = ({
                         variant = "primary",
                         label,
                         href,
                         ...props
                       }) => {
  const variants = {
    primary: buttonPrimary,
    secondary: buttonSecondary,
    tertiary: buttonTertiary,
    small: smallButton
  };

  // 处理单变体字符串或多变体数组，转换为类名字符串
  const getButtonClasses = () => {
    const variantList = Array.isArray(variant) ? variant : [variant];
    // 过滤无效变体，拼接有效类名
    return variantList
      .filter(v => Object.prototype.hasOwnProperty.call(variants, v))
      .map(v => variants[v])
      .join(' ');
  };

  return (
    <Link href={href || "#"}>
      <a className={getButtonClasses()} {...props}>
        {label}
      </a>
    </Link>
  );
};

关键修改点 #

• 兼容变体输入类型：通过Array.isArray(variant)判断输入是字符串还是数组，统一转换为数组处理
• 过滤无效变体：用filter排除variants对象中不存在的键，避免出现无效类名
• 拼接类名：用join(' ')将多个类名转换为空格分隔的字符串，符合HTML类名格式
• 传递自定义props：将...props传递给<a>标签，支持自定义属性如onClick等

使用示例 #

// 单个变体
<Button label={'Test'} variant={'primary'}/>

// 多个变体（同时应用primary和small样式）
<Button label={'Test'} variant={['primary', 'small']} />

// 自定义props示例
<Button label={'Click Me'} variant={['secondary', 'small']} onClick={() => alert('Clicked')} />

说明 #

• 确保你的button.module.scss中buttonPrimary和smallButton的样式是互补而非冲突的，比如buttonPrimary定义主色、边框等基础样式，smallButton定义字号、内边距等尺寸样式
• 如果需要新增变体，只需在variants对象中添加对应映射即可

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