React中根据选中星期数组条件渲染日期展示格式的实现问题

实现方案 #

你可以先加一步全选状态判断，再做条件渲染即可，具体实现如下：

1. 先定义全选校验逻辑

在组件渲染逻辑前先计算是否选中了全部工作日，避免顺序错乱、异常值导致的误判：

const isAllWorkdaysSelected = days.length === 5 
  && new Set(days.map(item => item.value)).size === 5
  && days.every(item => ['1','2','3','4','5'].includes(item.value));

2. 修改渲染逻辑

用三元表达式做分支渲染，全选时直接输出合并文本，其他情况保留原有逐个渲染逻辑，同时顺便优化了原写法最后一个标签多余逗号的问题：

<td>
{moment(start, 'HH:mm:ss').format('HH:mm')} /
{moment(end, 'HH:mm:ss').format('HH:mm') }
{
  isAllWorkdaysSelected ? (
    <span style={{paddingLeft: '2px'}}>Mon to Fri</span>
  ) : (
    days.map((day, index) => (
      <div key={index} style={{paddingLeft:'2px', display: 'inline-block'}}>
        {day.label}{index !== days.length - 1 ? ',' : ''}
      </div>
    ))
  )
}
</td>

如果不需要优化多余逗号的逻辑，直接保留你原有flatMap的写法放在非全选分支里也可以正常运行。

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