React 渲染一個條件 div 依賴數組

Question

我在 React 組件中有一個 html 表，該表使用從數組映射的數據呈現，並帶有服務處於活動狀態的星期幾標簽。 如果該數組中的標簽是星期一、星期二、星期三、星期四和星期五，我需要渲染一個縮寫，如“星期一到星期五”，而不是默認渲染“標簽”，“標簽”......這是片段

    <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>
        ]) }

但是，當用戶選擇星期一、星期二、星期三、星期四、星期五這五天時，我需要一個條件渲染來匹配該特定情況，任何其他情況都應該執行上面的代碼。

謝謝！

Answer 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);

Answer 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)