如何向 ReactJS 组件添加或删除多个类？

有以下方法可以向 ReactJS 组件添加或删除多个类：

方法 1：我们可以使用 classNames 方法（一个简单的 JavaScript 实用程序，用于有条件地将 classNames 连接在一起）。 classNames函数接受任意数量的参数，可以是字符串或对象。

参数 'row' 是 {row: true} 的缩写。如果与给定键关联的值是虚假的，则该键将不会包含在输出中。在以下示例中， row和col是类的名称。

classNames('row', 'col'); // => 'row col'
classNames('row', { col: true }); // => 'row col'
classNames({ 'row-col': true }); // => 'row-col'
classNames({ 'row-col': false }); // => ''
classNames({ row: true }, { col: true }); // => 'row col'
classNames({ row: true, col: true }); // => 'row col'

模块安装：

我们必须安装依赖项才能使用 classNames函数，并且我们将使用引导类。

# via npm
npm install classnames 

# via Bower
bower install classnames

# via Yarn 
yarn add classnames

文件名：App.js

Javascript

import React, { Component } from "react";
// Importing classNames 
import classNames from 'classnames'
class GFG extends Component {
  state = {
    flag : true
  }
    
  handleUpdate = () => {
    this.setState({flag: !this.state.flag})
}
  
  render() {
   // Using classNames to add and remove
   // Classes based on state 
    var classes = classNames( {
      'btn': true,
      'btn-primary': this.state.flag === true,
      'btn-success':this.state.flag===false
    })
      
        return (
            

               
              Click to add and remove classes 
                  
            
        );
  }
}
export default GFG;

文件路径：public/index.html

HTML

文件路径：src/Component/App.js

Javascript

import React from 'react'
import GFG from './GFG'
const App  = () => {
  
    return 

        
    
}
  
export default App;

文件路径：src/index.js

Javascript

import React, { Component } from 'react';
import   ReactDOM  from 'react-dom';
import App from './components/App'
  
ReactDOM.render( , document.querySelector('#root'))

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

npm start

方法 2：我们可以使用 ES6 模板字面量。

文件名：App.js

Javascript

import React, { Component } from "react";
import './App.css'
class App extends Component {
  
  state = {
    flag: true
  }
  
  handleUpdate = () => {
    this.setState({ flag: !this.state.flag })
  }
  
  render() {
    return (
      

        
          Click to add and remove classes
         
      
    );
  }
}
  
export default App;

文件名：App.css

css

.appContainer{
  margin-left: 40%;
  margin-top: 50px;
}
  
.box1{
  background-color: green;
  padding: 10px;
}
  
.box2{
  background-color: yellow;
  padding: 10px;
}

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

npm start

输出：

• 按钮点击前

• 现在单击按钮后，将输出以下内容：

  

  点击按钮后