React 渲染一个条件 div 依赖数组答案

【问题标题】：React render a conditional div depending arrayReact 渲染一个条件 div 依赖数组
【发布时间】：2021-07-23 23:15:53
【问题描述】：

我在 React 组件中有一个 html 表，它使用从数组映射的数据呈现，并带有服务处于活动状态的一周的日期标签。如果该数组中的标签是星期一、星期二、星期三、星期四和星期五，我需要渲染一个缩写，如“Mon to Fri”，而不是默认渲染“label”，“label”...这里是 sn-p

    <td>
    {moment(start, 'HH:mm:ss').format('HH:mm')} /
    {moment(end, 'HH:mm:ss').format('HH:mm') }
    { days.flatMap((days, i) => [
      <div style={{paddingLeft:'2px', display: 'inline-block'}}>
          {days.label},
      </div>
    ]) }
    </td>

对象天是这样的：

[
  {
    "label": "Mon",
    "value": "1"
  },
  {
    "label": "Tue",
    "value": "2"
  },
  {
    "label": "Wed",
    "value": "3"
  },
  {
    "label": "Thu",
    "value": "4"
  },
  {
    "label": "Fri",
    "value": "5"
  }
]

编辑：添加一张图片，它是西班牙语，但 Lun = 星期一，Mar= 星期二，依此类推... 我已经使用以下代码渲染了所选的工作日，周一、周三和周五：

{ days.flatMap((days, i) => [
          <div style={{paddingLeft:'2px', display: 'inline-block'}}>{days.label},</div>
        ]) }

但是，当用户选择周一、周二、周三、周四、周五这五天时，我需要一个条件渲染来匹配该特定情况，任何其他情况都应该执行上面的代码。

谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

听起来您只想获取days 数组的第一个和最后一个元素并计算一个缩写间隔。

const days = [{
    "label": "Mon",
    "value": "1"
  },
  {
    "label": "Tue",
    "value": "2"
  },
  {
    "label": "Wed",
    "value": "3"
  },
  {
    "label": "Thu",
    "value": "4"
  }, {
    "label": "Fri",
    "value": "5"
  }
];

const abbreviation = [days[0], days.length > 1 && days[days.length - 1]]
  .filter(Boolean)
  .map(({ label }) => label)
  .join(' to ');

console.log(abbreviation);

如果原始数据具有完整的日期名称，请使用相同但更新映射的内容。

const days = [{
    "label": "Monday",
    "value": "1"
  },
  {
    "label": "Tuesday",
    "value": "2"
  },
  {
    "label": "Wednesday",
    "value": "3"
  },
  {
    "label": "Thursday",
    "value": "4"
  }, {
    "label": "Friday",
    "value": "5"
  }
];

const abbreviation = [days[0], days.length > 1 && days[days.length - 1]]
  .filter(Boolean)
  .map(({ label }) => label.slice(0,3))
  .join(' to ');

console.log(abbreviation);

【讨论】：

【解决方案2】：

试试这个更简单的方法

const days = [{
    "label": "Mon",
    "value": "1"
  },
  {
    "label": "Tue",
    "value": "2"
  },
  {
    "label": "Wed",
    "value": "3"
  },
  {
    "label": "Thu",
    "value": "4"
  }, {
    "label": "Fri",
    "value": "5"
  }
];

console.log(days[0].label+' to '+days[days.length-1].label)

【讨论】：

当days 数组为[{ label: 'Mon', value: 0 }] 时会发生什么？
嗨，数组总是一样的，值 1 总是星期一。