React（JavaScript）如何根据数值正负设置文本颜色

这里提供几个简洁且可复用的实现思路，直接解决根据数值动态设置文本颜色的需求：

基础版：固定颜色规则 #

创建一个接收value属性的styled组件，内部直接根据数值判断颜色，最适合规则固定的场景：

import styled from 'styled-components';

const StatusText = styled.span`
  color: ${({ value }) => {
    if (value > 0) return 'green';
    if (value < 0) return 'red';
    return 'orange'; // 对应需求里的橙色/黄色
  }};
`;

// 调用示例
function App() {
  return (
    <div>
      <StatusText value={15}>+15</StatusText>
      <StatusText value={0}>0</StatusText>
      <StatusText value={-7}>-7</StatusText>
    </div>
  );
}

export default App;

进阶版：支持自定义颜色 #

如果需要在不同场景使用不同的颜色规则，可以扩展组件，允许传入自定义颜色参数：

const StatusText = styled.span`
  color: ${({ value, positiveColor = 'green', negativeColor = 'red', zeroColor = 'orange' }) => {
    if (value > 0) return positiveColor;
    if (value < 0) return negativeColor;
    return zeroColor;
  }};
`;

// 自定义颜色调用示例
<StatusText value={20} positiveColor="#2ecc71">+20</StatusText>
<StatusText value={0} zeroColor="#f1c40f">0</StatusText>

更优雅的逻辑拆分 #

如果颜色判断逻辑复杂，可以把逻辑抽成独立工具函数，让styled组件更简洁：

// 单独的颜色判断函数
const getStatusColor = (value, customColors = {}) => {
  const defaultColors = {
    positive: 'green',
    negative: 'red',
    zero: 'orange'
  };
  const colors = { ...defaultColors, ...customColors };
  
  return value > 0 ? colors.positive : value < 0 ? colors.negative : colors.zero;
};

// 复用的styled组件
const StatusText = styled.span`
  color: ${({ value, colors }) => getStatusColor(value, colors)};
`;

这几种方案都能实现高度复用，你可以根据自己的需求选择最合适的版本，直接在项目中引入使用即可。

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