React JS简易计数器：实现根据数值正负切换显示颜色

这里提供两种简洁的实现方式，满足你当计数器值大于0时显示绿色、小于0时显示红色的需求：

方式一：内联样式实现 #

直接通过条件判断动态生成内联样式，适合简单场景：

import { useState } from 'react';

function Counter() {
  const [counter, setCounter] = useState(0);

  return (
    <div style={{ textAlign: 'center', marginTop: '2rem' }}>
      <h1 style={{ 
        color: counter > 0 ? 'green' : counter < 0 ? 'red' : 'black' 
      }}>
        {counter}
      </h1>
      <button onClick={() => setCounter(prev => prev + 1)} style={{ margin: '0 0.5rem' }}>
        +1
      </button>
      <button onClick={() => setCounter(prev => prev - 1)} style={{ margin: '0 0.5rem' }}>
        -1
      </button>
    </div>
  );
}

export default Counter;

方式二：CSS类名实现 #

如果需要后续扩展更复杂的样式，推荐用类名控制，结构更清晰：

首先定义CSS样式：

.counter-text {
  font-size: 2rem;
  font-weight: bold;
}

.counter-green {
  color: #2ecc71;
}

.counter-red {
  color: #e74c3c;
}

.counter-default {
  color: #333;
}

然后编写组件：

import { useState } from 'react';
import './Counter.css'; // 引入样式文件

function Counter() {
  const [counter, setCounter] = useState(0);

  // 根据计数器值选择对应的类名
  const getCounterClassName = () => {
    if (counter > 0) return 'counter-text counter-green';
    if (counter < 0) return 'counter-text counter-red';
    return 'counter-text counter-default';
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '2rem' }}>
      <h1 className={getCounterClassName()}>{counter}</h1>
      <button onClick={() => setCounter(prev => prev + 1)} style={{ margin: '0 0.5rem', padding: '0.5rem 1rem' }}>
        +1
      </button>
      <button onClick={() => setCounter(prev => prev - 1)} style={{ margin: '0 0.5rem', padding: '0.5rem 1rem' }}>
        -1
      </button>
    </div>
  );
}

export default Counter;

核心逻辑说明 #

• 用useState钩子维护计数器的状态值，确保点击按钮时状态能正确更新
• 通过条件判断（三元运算符或独立函数）根据counter的数值动态选择颜色样式/类名
• 每次counter状态变化时，React会自动重新渲染组件，颜色也会同步更新

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