在 React 组件开发中，经常需要根据不同的状态或需求应用不同的样式。当需要组合多个样式类名时，直接传递字符串可能不够灵活。本文将介绍如何将对象值作为属性数组传递给 React 组件，以实现更灵活的样式控制。本文以一个按钮组件为例，展示如何将多个来自 .module.scss 文件的样式类名组合应用到按钮上。
传递样式数组
首先，我们需要修改组件的属性定义，允许 variant 属性接收一个字符串数组，而不是单个字符串。
export const Button = ({
variant = "primary",
label,
href,
...props
}) => {
// ...
};接下来，我们需要修改组件内部的逻辑，处理 variant 属性。如果 variant 是一个数组，我们需要遍历这个数组，将每个元素映射到对应的 CSS 类名，然后将这些类名连接成一个字符串，作为 className 属性的值。
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 classNames = Array.isArray(variant)
? variant.map(v => variants[v]).join(' ')
: variants[variant];
return (
<Link href={href ? href : "#"}>
<a className={classNames}>
{label}
</a>
</Link>
);
};在上面的代码中，我们首先使用 Array.isArray(variant) 检查 variant 是否是一个数组。如果是数组，则使用 map 方法遍历数组，将每个 variant 值映射到 variants 对象中对应的 CSS 类名。然后，使用 join(' ') 方法将这些类名连接成一个字符串，用空格分隔。如果 variant 不是数组，则直接从 variants 对象中获取对应的 CSS 类名。
组件使用示例
现在，我们可以在组件中使用数组来传递多个样式类名：
<Button label={'Test'} variant={['primary', 'small']} />在这个例子中，按钮将同时应用 buttonPrimary 和 smallButton 两个样式类名。
注意事项
- 确保 .module.scss 文件中定义了所有需要使用的样式类名。
- 在 variants 对象中定义了所有可能的 variant 值对应的 CSS 类名。
- 如果 variant 属性没有传递值，或者传递了无效的值，应该提供一个默认值，以避免出现错误。
总结
通过将对象值作为属性数组传递给 React 组件，我们可以实现更灵活的样式控制。这种方法可以方便地组合多个样式类名，从而创建出更丰富的用户界面。在实际开发中，可以根据具体的需求，灵活运用这种方法。
