ReactJS如何像Angular一样获取更新变量值及为指定元素切换class

你提到的类似Angular的变量更新、元素切换Class的操作，在React中完全可以实现，核心是依托React的状态驱动视图机制实现。

注意：你给出的示例中直接修改this.variable的写法在React中不会触发视图更新，必须把变量声明在状态中，通过React提供的状态更新方法修改，才能触发关联视图重新渲染。

1. 类组件实现方案 #

import React from 'react';

class Demo extends React.Component {
  // 把变量定义在state中
  state = {
    variable: 'default-class'
  }

  handleClick = () => {
    // 必须通过setState更新状态，才能触发视图更新
    this.setState({
      variable: 'new-class'
    })
  }

  // 切换Class的写法示例
  toggleClass = () => {
    this.setState(prevState => ({
      variable: prevState.variable === 'active' ? '' : 'active'
    }))
  }

  render() {
    return (
      <>
        <img 
          src={ham} 
          className="cursor-pointer" 
          width="40" 
          alt="" 
          onClick={this.handleClick} 
        />
        {/* 用模板字符串拼接className更清晰 */}
        <div className={`${this.state.variable} cursor-pointer`}>
          Content
        </div>
      </>
    )
  }
}

2. 函数组件（Hooks）实现方案（当前主流写法） #

import React, { useState } from 'react';

const Demo = () => {
  // 声明状态变量和对应的更新方法
  const [customClass, setCustomClass] = useState('default-class');

  const handleClick = () => {
    setCustomClass('new-class');
  }

  // 切换Class的写法示例
  const toggleActive = () => {
    setCustomClass(prev => prev === 'active' ? '' : 'active');
  }

  // 复杂Class逻辑可以提前计算
  const getDivClass = () => {
    const classList = ['cursor-pointer'];
    if (customClass) classList.push(customClass);
    // 可添加更多自定义判断逻辑
    return classList.join(' ');
  }

  return (
    <>
      <img 
        src={ham} 
        className="cursor-pointer" 
        width="40" 
        alt="" 
        onClick={handleClick} 
      />
      <div className={getDivClass()}>
        Content
      </div>
    </>
  )
}

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