React条件渲染实现计数上限控制：计数到5停止并高亮数值

1. 限制计数递增逻辑 #

修改addCount函数，添加条件判断：只有当前计数小于目标值（这里设为5）时，才执行递增操作：

function addCount() {
  setCount(prevCount => {
    // 计数未达5时才允许递增
    if (prevCount < 5) {
      return prevCount + 1;
    }
    // 达到5后保持当前值
    return prevCount;
  });
}

2. 高亮达到目标值的计数 #

通过条件渲染给<p>标签设置动态样式，当count等于5时将文字设为红色：

// 内联样式写法
<p style={{ color: count === 5 ? 'red' : 'inherit' }}>Customers {count}</p>

// CSS类名写法（需先定义.highlight-red类）
// <p className={count === 5 ? 'highlight-red' : ''}>Customers {count}</p>

完整组件代码示例 #

import { useState } from 'react';
import Uu5Elements from 'uu5g04';

function KauflandCounter() {
  const [count, setCount] = useState(0);
  const MAX_COUNT = 5; // 抽成常量，方便后续修改目标值

  function addCount() {
    setCount(prevCount => prevCount < MAX_COUNT ? prevCount + 1 : prevCount);
  }

  return (
    <div>
      <h1>Kaufland</h1>
      <p style={{ color: count === MAX_COUNT ? 'red' : 'inherit' }}>Customers {count}</p>
      <Uu5Elements.Button class="btn2" onClick={addCount}>+1</Uu5Elements.Button>
    </div>
  );
}

export default KauflandCounter;

调整后，点击按钮到计数为5时会停止递增，同时数字自动变为红色。若要修改目标上限，直接更改MAX_COUNT的值即可。

内容的提问来源于stack exchange，提问作者Zdeněk Chlouba