React 基础面试题, React 项目中,如何动态改变组件的 class 来切换样式?

Step 1

Q:: React 项目中，如何动态改变组件的 class 来切换样式？

A:: 在 React 中，你可以使用条件渲染和 className 属性来动态改变组件的样式。例如，通过结合三元运算符或逻辑运算符来根据状态值决定组件的 className。以下是一个简单的示例：

 
import React, { useState } from 'react';
 
function MyComponent() {
  const [isActive, setIsActive] = useState(false);
 
  return (
    <div className={isActive ? 'active' : 'inactive'}>
      <button onClick={() => setIsActive(!isActive)}>
        Toggle Class
      </button>
    </div>
  );
}
 

在这个示例中，根据 isActive 状态的值，div 元素的 className 会动态变为 'active' 或 'inactive'，从而切换样式。

Step 2

Q:: 如何在 React 中为组件添加多个 class？

A:: 在 React 中，你可以使用模板字符串或数组拼接的方式为组件添加多个 class。例如：

 
<div className={`${isActive ? 'active' : ''} base-class`}></div>
 

或者使用数组拼接方式：

 
<div className={['base-class', isActive && 'active'].filter(Boolean).join(' ')}></div>
 

这两种方式都可以确保在满足条件的情况下为组件添加多个 class。

Step 3

Q:: 如何使用 CSS 模块在 React 中实现样式隔离？

A:: CSS 模块是一种通过自动生成独特的 class 名称来确保样式的局部作用域不被污染的方法。在 React 中，使用 CSS 模块的方法如下： 1. 首先创建一个 CSS 模块文件，命名为 styles.module.css。 2. 然后在组件中导入这个模块：

 
import styles from './styles.module.css';
 

3. 最后，在组件的 className 中使用模块中的样式：

 
<div className={styles.myClass}></div>
 

这样，myClass 只会应用于当前组件，避免了全局命名冲突的问题。