classnames的理解

本篇文章主要是学习classnames的相关理解及使用。
下面列举的是如何在项目中使用

安装方式

npm install classnames

使用方式

1. 引入时可使用require的方式引入，也可以通过import的方式引入

使用方法

import classnames form 'classnames
classnames('foo','bar') == 'foo bar'
classnames('foo',{bar:true}) == 'foo bar'

一般在React中，我们会在构建组件或需要根据某些判断条件动态生成类名时，classnames会非常有用。

示例一：

import React, { useState } from 'react';

export default function Button (props) {
	const [isPressed, setIsPressed] = useState(false);
	const [isHovered, setIsHovered] = useState(false);

	let btnClass = 'btn';
	if (isPressed) btnClass += ' btn-pressed';
	else if (isHovered) btnClass += ' btn-over';

	return (
		<button
			className={btnClass}
			onMouseDown={() => setIsPressed(true)}
			onMouseUp={() => setIsPressed(false)}
			onMouseEnter={() => setIsHovered(true)}
			onMouseLeave={() => setIsHovered(false)}
		>
			{props.label}
		</button>
	);
}

使用classnames之后

import React, { useState } from 'react';
import classNames from 'classnames';

export default function Button (props) {
	const [isPressed, setIsPressed] = useState(false);
	const [isHovered, setIsHovered] = useState(false);

	const btnClass = classNames({
		btn: true,
		'btn-pressed': isPressed,
		'btn-over': !isPressed && isHovered,
	});

	return (
		<button
			className={btnClass}
			onMouseDown={() => setIsPressed(true)}
			onMouseUp={() => setIsPressed(false)}
			onMouseEnter={() => setIsHovered(true)}
			onMouseLeave={() => setIsHovered(false)}
		>
			{props.label}
		</button>
	);
}

源码理解

classnames文件目录结构
classnames
┣