每当组件在 ReactJS 中更新时如何添加 CSS 类？

如果我们想在组件更新或组件的 state/props 更改时更新/添加 CSS 类，那么我们必须根据 state/props 值有条件地应用 CSS。

这是一个有条件地添加 CSS 类的简单示例。

当标志的值为 true 时，将应用隐藏的类，否则仅应用盒子 CSS 类。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { Component } from 'react';
import styles from './index.css';
  
class App extends Component {
    state = {
        flag: true
    };
  
    handleUpdate = () => {
        this.setState(prevstate => ({ flag: !prevstate.flag }));
    };
  
    render() {
        const flag = this.state.flag;
        return (
            
                
                
                    click on button to hide and show the box
                
            
        );
    }
}
  
export default App;

index.css

.box{
  width: 100px;
  height: 200;
  padding: 20px;
  border: 1px solid black;
}
.hidden {
  display: none;
}

索引.css

.box{
  width: 100px;
  height: 200;
  padding: 20px;
  border: 1px solid black;
}
.hidden {
  display: none;
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

正如我们从上面的输出中看到的那样，当隐藏的 CSS 类将根据状态的更新值添加到 HTML 元素中时，该框将消失。