如何根据剩余预算动态设置ReactJS组件的背景样式？

问题根源 #

你之前的代码无效，核心原因是变量定义在组件函数外部，无法访问到组件内部的props。props是组件函数的参数，只有在函数作用域内才能读取。

方案1：组件内部直接写多分支判断（最直观） #

把颜色判断逻辑移到组件函数内部，就能正常获取props.remainingBudget，还能轻松扩展多种颜色阈值：

function SavingsBoardBucket(props) {
  const remBudget = props.remainingBudget;
  let bucketStyle = "";

  if (remBudget >= 50) {
    bucketStyle = "savings-board-bucket-wrapper-green";
  } else if (remBudget >= 20) { // 新增中间阈值，支持第三种颜色
    bucketStyle = "savings-board-bucket-wrapper-yellow";
  } else {
    bucketStyle = "savings-board-bucket-wrapper-red";
  }

  return (
    <div className='savings-board-bucket-wrapper'>
      <div className={bucketStyle}>
        <p className='savings-board-bucket-label'>{remBudget}</p>
      </div>
    </div>
  )
}

方案2：用映射数组管理阈值（更易扩展） #

如果需要频繁新增颜色规则，可以把阈值和类名的对应关系做成数组，通过find方法匹配，代码可读性和维护性更好：

function SavingsBoardBucket(props) {
  const remBudget = props.remainingBudget;
  
  // 按阈值从高到低排序，确保优先匹配最高符合条件的规则
  const styleRules = [
    { threshold: 50, className: "savings-board-bucket-wrapper-green" },
    { threshold: 20, className: "savings-board-bucket-wrapper-yellow" },
    { threshold: 0, className: "savings-board-bucket-wrapper-red" },
  ];

  // 找到第一个符合条件的类名，兜底用红色
  const bucketStyle = styleRules.find(rule => remBudget >= rule.threshold)?.className || "savings-board-bucket-wrapper-red";

  return (
    <div className='savings-board-bucket-wrapper'>
      <div className={bucketStyle}>
        <p className='savings-board-bucket-label'>{remBudget}</p>
      </div>
    </div>
  )
}

方案3：抽成工具函数（复用性强） #

如果多个组件都需要这个颜色判断逻辑，可以把逻辑抽成独立的工具函数，方便复用：

// 单独的工具函数，可放在utils文件中
function getBudgetBucketClass(remainingBudget) {
  if (remainingBudget >= 50) {
    return "savings-board-bucket-wrapper-green";
  } else if (remainingBudget >= 20) {
    return "savings-board-bucket-wrapper-yellow";
  } else {
    return "savings-board-bucket-wrapper-red";
  }
}

function SavingsBoardBucket(props) {
  const bucketStyle = getBudgetBucketClass(props.remainingBudget);

  return (
    <div className='savings-board-bucket-wrapper'>
      <div className={bucketStyle}>
        <p className='savings-board-bucket-label'>{props.remainingBudget}</p>
      </div>
    </div>
  )
}

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