React中点击按钮切换div类名的最简实现方法

直接用React的状态管理就能搞定，函数组件+useState是最简洁高效的写法，代码量少还直观：

核心实现步骤 #

• 用useState维护一个布尔状态，用来控制div的显示/隐藏状态
• 根据状态动态给div分配类名：状态为true时用btndivhidden，否则用btndiv
• 按钮点击时翻转这个状态

完整代码示例 #

import { useState } from 'react';

function MyComponent() {
  // 默认不隐藏，所以初始状态设为false
  const [isHidden, setIsHidden] = useState(false);

  return (
    <div>
      {/* 动态切换类名 */}
      <div className={isHidden ? 'btndivhidden' : 'btndiv'}>
        这里是需要控制显隐的内容
      </div>
      {/* 点击按钮切换状态，按钮文字也跟着变 */}
      <button onClick={() => setIsHidden(!isHidden)}>
        {isHidden ? '显示' : '隐藏'}
      </button>
    </div>
  );
}

export default MyComponent;

样式补充 #

确保你的CSS里有这个类：

.btndivhidden {
  display: none;
}

如果习惯用类组件，写法稍繁琐但逻辑一致：

import React from 'react';

class MyComponent extends React.Component {
  state = { isHidden: false };

  toggleHidden = () => {
    this.setState(prevState => ({ isHidden: !prevState.isHidden }));
  };

  render() {
    return (
      <div>
        <div className={this.state.isHidden ? 'btndivhidden' : 'btndiv'}>
          这里是需要控制显隐的内容
        </div>
        <button onClick={this.toggleHidden}>
          {this.state.isHidden ? '显示' : '隐藏'}
        </button>
      </div>
    );
  }
}

export default MyComponent;

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