如何通过onclick()为React组件添加与移除className？

在React中，我们通过**状态（state）**来管理组件的类名，而非直接操作DOM（React推荐数据驱动视图的实现方式）。以下是针对你需求的具体实现：

函数组件（React 16.8+ 推荐） #

利用useState钩子维护类名状态，点击事件触发状态更新后，组件会自动重新渲染并替换类名：

import { useState } from 'react';

const Square = () => {
  // 初始化状态，默认使用red-square类
  const [squareClass, setSquareClass] = useState('red-square');

  const handleClick = () => {
    // 点击后将类名替换为green-square
    setSquareClass('green-square');
  };

  return (
    <div 
      className={squareClass}
      onClick={handleClick}
    />
  );
};

export default Square;

扩展：双向切换类名（可选） #

如果需要点击一次变绿、再点击变回红色，修改handleClick逻辑即可：

const handleClick = () => {
  setSquareClass(prevClass => 
    prevClass === 'red-square' ? 'green-square' : 'red-square'
  );
};

类组件（兼容旧版本React） #

若使用类组件，通过组件实例的state管理类名：

import React, { Component } from 'react';

class Square extends Component {
  constructor(props) {
    super(props);
    this.state = { squareClass: 'red-square' };
    // 绑定事件处理函数的this指向
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ squareClass: 'green-square' });
  }

  render() {
    return (
      <div 
        className={this.state.squareClass}
        onClick={this.handleClick}
      />
    );
  }
}

export default Square;

内容的提问来源于stack exchange，提问作者Raiffe Moura