本文介绍了在 react 组件中，如何根据状态动态地为一个 html 元素添加或移除多个 css 类名。通过字符串模板和条件判断，可以灵活地控制元素的样式，实现丰富的交互效果。文章提供了两种实现方式，包括使用模板字符串和提前计算类名，并分析了各自的优缺点，帮助开发者选择最适合的方案。
在 React 开发中，经常需要根据组件的状态动态地改变 HTML 元素的 CSS 类名，从而实现不同的视觉效果或交互行为。例如，根据按钮的点击状态切换不同的样式，或者根据数据的加载状态显示不同的提示信息。本文将介绍几种在 React 中动态切换多个类名的方法，并分析它们的优缺点。
使用模板字符串
模板字符串是一种简洁且易于理解的方式，可以将多个类名拼接成一个字符串，并根据条件判断是否添加某个类名。
import React, { useState } from 'react'; function MyComponent() { const [isActive, setIsActive] = useState(false); const [isHighlighted, setIsHighlighted] = useState(false); return ( <div className={`my-element ${isActive ? 'active' : ''} ${ isHighlighted ? 'highlighted' : '' }`} > Hello, world! <button onClick={() => setIsActive(!isActive)}>Toggle Active</button> <button onClick={() => setIsHighlighted(!isHighlighted)}>Toggle Highlighted</button> </div> ); } export default MyComponent;
在这个例子中，className 属性的值是一个模板字符串，它包含了三个部分：
- “my-element”：这是元素的基本类名，始终存在。
- ${isActive ? ‘active’ : ”}：如果 isActive 为 true，则添加 active 类名，否则添加空字符串。
- ${isHighlighted ? ‘highlighted’ : ”}：如果 isHighlighted 为 true，则添加 highlighted 类名，否则添加空字符串。
通过点击按钮，可以改变 isActive 和 isHighlighted 的值，从而动态地改变元素的类名。
优点：
- 简洁易懂，代码可读性高。
- 易于扩展，可以添加更多的条件判断。
缺点：
- 如果条件判断过多，字符串会变得很长，可读性降低。
- 如果多个条件同时为 false，可能会出现多个空格，虽然通常不会影响显示效果，但不够优雅。
提前计算类名
如果逻辑比较复杂，或者需要复用类名，可以将类名的计算逻辑提取到组件的渲染函数之外，提前计算好类名，然后直接赋值给 className 属性。
import React, { useState } from 'react'; function MyComponent() { const [isActive, setIsActive] = useState(false); const [isHighlighted, setIsHighlighted] = useState(false); let className = 'my-element'; if (isActive) { className += ' active'; } if (isHighlighted) { className += ' highlighted'; } return ( <div className={className}> Hello, world! <button onClick={() => setIsActive(!isActive)}>Toggle Active</button> <button onClick={() => setIsHighlighted(!isHighlighted)}>Toggle Highlighted</button> </div> ); } export default MyComponent;
在这个例子中，首先定义一个 className 变量，并初始化为基本类名 “my-element”。然后，根据 isActive 和 isHighlighted 的值，分别添加 active 和 highlighted 类名。最后，将 className 变量的值赋值给 className 属性。
优点：
- 逻辑清晰，易于维护。
- 可以复用类名计算逻辑。
- 避免了模板字符串过长的问题。
缺点：
- 代码量稍多，不如模板字符串简洁。
使用 classnames 库
classnames 是一个流行的 javaScript 库，专门用于处理 CSS 类名。它可以简化类名的拼接逻辑，并提供一些额外的功能，例如自动过滤掉 false、NULL、undefined 等值。
import React, { useState } from 'react'; import classNames from 'classnames'; function MyComponent() { const [isActive, setIsActive] = useState(false); const [isHighlighted, setIsHighlighted] = useState(false); const className = classNames('my-element', { active: isActive, highlighted: isHighlighted, }); return ( <div className={className}> Hello, world! <button onClick={() => setIsActive(!isActive)}>Toggle Active</button> <button onClick={() => setIsHighlighted(!isHighlighted)}>Toggle Highlighted</button> </div> ); } export default MyComponent;
在这个例子中，使用 classNames 函数将基本类名 “my-element” 和一个对象作为参数。对象中的键是类名，值是布尔值，表示是否添加该类名。classNames 函数会自动过滤掉值为 false 的键，并将剩余的类名拼接成一个字符串。
优点：
- 简化类名拼接逻辑。
- 自动过滤掉无效值。
- 提供一些额外的功能，例如支持数组参数。
缺点：
- 需要安装额外的依赖。
总结
在 React 中动态切换多个类名有多种方法，可以根据具体情况选择最适合的方案。如果逻辑简单，可以使用模板字符串；如果逻辑复杂，可以提前计算类名；如果需要更强大的功能，可以使用 classnames 库。无论选择哪种方法，都要注意代码的可读性和可维护性，避免出现冗余和混乱的代码。