如何简化React中Leases.ProgramBucket的多值条件判断以减少冗余

我有一段从SQL数据库拉取数据的React代码，针对Leases.DaysPastDue <= 30且Leases.ProgramBucket分别为'B'、'C'、'SU'的场景，重复写了多组<tr>的条件渲染代码，虽然能正常运行，但冗余度极高。我想把Leases.ProgramBucket的多值判断简化成更简洁的形式（比如类似Leases.ProgramBucket === 'B' || 'C' || 'SU'的写法），之前尝试混用&&和||没成功，求解决代码简化的问题。

现有冗余代码如下：

<tr>
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'B' ? <td>{Leases.LeaseNumber}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'B' ? <td>{Leases.LeaseName}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'B' ? <td>{Leases.DaysPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'B' ? <td>{Leases.AmountPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'B' ? <td>{Leases.ProgramBucket}</td> : <td className='hide'></td>}
</tr>
<tr>
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'C' ? <td>{Leases.LeaseNumber}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'C' ? <td>{Leases.LeaseName}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'C' ? <td>{Leases.DaysPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'C' ? <td>{Leases.AmountPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'C' ? <td>{Leases.ProgramBucket}</td> : <td className='hide'></td>}
</tr>
<tr>
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'SU' ? <td>{Leases.LeaseNumber}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'SU' ? <td>{Leases.LeaseName}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'SU' ? <td>{Leases.DaysPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'SU' ? <td>{Leases.AmountPastDue}</td> : <td className='hide'></td>}
    {Leases.DaysPastDue <= 30 && Leases.ProgramBucket === 'SU' ? <td>{Leases.ProgramBucket}</td> : <td className='hide'></td>}
</tr>

解决方案 #

1. 先修正多值判断的逻辑错误 #

你之前尝试的Leases.ProgramBucket === 'B' || 'C' || 'SU'写法不成立，因为逻辑或||会把非空字符串判定为真，导致这个表达式永远返回true。正确的多值判断有两种写法：

• 数组包含判断（推荐，更简洁）：['B', 'C', 'SU'].includes(Leases.ProgramBucket)
• 完整逻辑或：Leases.ProgramBucket === 'B' || Leases.ProgramBucket === 'C' || Leases.ProgramBucket === 'SU'

2. 提取重复条件+循环渲染 #

既然三组的逻辑只有ProgramBucket的值不同，直接把目标Bucket做成数组循环渲染，彻底消除冗余：

// 定义需要匹配的Bucket列表
const targetBuckets = ['B', 'C', 'SU'];

// 循环生成<tr>
{targetBuckets.map(bucket => {
  // 提取当前行的匹配条件
  const isMatch = Leases.DaysPastDue <= 30 && Leases.ProgramBucket === bucket;
  return (
    <tr key={bucket}>
      <td className={isMatch ? '' : 'hide'}>{isMatch ? Leases.LeaseNumber : null}</td>
      <td className={isMatch ? '' : 'hide'}>{isMatch ? Leases.LeaseName : null}</td>
      <td className={isMatch ? '' : 'hide'}>{isMatch ? Leases.DaysPastDue : null}</td>
      <td className={isMatch ? '' : 'hide'}>{isMatch ? Leases.AmountPastDue : null}</td>
      <td className={isMatch ? '' : 'hide'}>{isMatch ? Leases.ProgramBucket : null}</td>
    </tr>
  );
})}

3. 进一步优化：整行条件渲染或封装组件 #

如果业务允许，当条件不匹配时可以直接不渲染该行，而不是渲染带hide类的空，代码会更简洁：

{targetBuckets.map(bucket => {
  const isMatch = Leases.DaysPastDue <= 30 && Leases.ProgramBucket === bucket;
  // 只有匹配时才渲染整行
  return isMatch ? (
    <tr key={bucket}>
      <td>{Leases.LeaseNumber}</td>
      <td>{Leases.LeaseName}</td>
      <td>{Leases.DaysPastDue}</td>
      <td>{Leases.AmountPastDue}</td>
      <td>{Leases.ProgramBucket}</td>
    </tr>
  ) : null;
})}

如果必须保留空的结构，可以封装一个复用的单元格组件：

// 封装可复用的单元格组件
const LeaseTableCell = ({ show, content }) => (
  <td className={show ? '' : 'hide'}>{show ? content : null}</td>
);

// 使用组件渲染
{targetBuckets.map(bucket => {
  const isMatch = Leases.DaysPastDue <= 30 && Leases.ProgramBucket === bucket;
  return (
    <tr key={bucket}>
      <LeaseTableCell show={isMatch} content={Leases.LeaseNumber} />
      <LeaseTableCell show={isMatch} content={Leases.LeaseName} />
      <LeaseTableCell show={isMatch} content={Leases.DaysPastDue} />
      <LeaseTableCell show={isMatch} content={Leases.AmountPastDue} />
      <LeaseTableCell show={isMatch} content={Leases.ProgramBucket} />
    </tr>
  );
})}

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