实现 classNames

原创于 2023-03-22 15:38:05 发布 · 284 阅读

CC 4.0 BY-SA版权

文章标签：

该文章定义了两个接口ClassArray和ClassDictionary，以及一个类型ClassValue，用于处理不同类型的类名值。然后，它导出一个名为classNames的函数，该函数接受ClassValue类型的参数，将这些参数转化为字符串并合并成一个CSS类名字符串。函数内部逻辑包括检查参数类型，处理字符串、数字、数组和对象等不同情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

interface ClassArray extends Array<ClassValue> {}

interface ClassDictionary {
    [id: string]: any;
}
type ClassValue =  string | number | ClassDictionary | ClassArray | undefined | null | boolean;

export default function classNames(...args: ClassValue[]): string {
	const classes: ClassValue[] = [];
	const { length } = args;
	
	for ( let index = 0; index < length ; index++ ){
		const arg: ClassValue = args[index];
		if(arg){
			const argType: string = typeof arg;
			if (argType === 'string' || argType === ''number) {
				classes.push(arg);
			}else if (Array.isArray(arg) && arg.length) {
				const inner: string = className.call(null, ...arg);
				if (inner) {
					classes.push(inner);
				}
			}else if (argType === 'object') {
				const inner: string = Object.keys(arg)
				.filter((key)=> arg[key])
				.join(' ');
				if(inner) {
					classes.push(inner);	
				}	
			}
		}
	}
	return classes.join(' ');
}