在 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 组件，我们可以实现更灵活的样式控制。这种方法可以方便地组合多个样式类名，从而创建出更丰富的用户界面。在实际开发中，可以根据具体的需求，灵活运用这种方法。