在 Styled-Component 中傳遞道具不起作用（使用功能組件）

Question

現在，我才剛剛開始學習 styled-component。 我不知道為什么它沒有達到我的預期。 首先，我向 props 傳遞一個數據（weekendData），我想根據數據更改顏色。 如果 data.schedule(weekendData.schedule) 包括("_") 我想將顏色更改為紅色，它應該是黑色/藍色。

• 我所期望的

：在weekendData.schedule 中，第六個元素包括“_”，所以它應該是紅色但它沒有改變任何東西。 此外，當我將黑色更改為另一種顏色（如粉紅色或黃色）時，顏色仍然是黑色，這意味着默認顏色。 我猜樣式組件中的顏色沒有做任何事情。

這是周末數據

這是我的代碼

<WeekendScheduleDate value={weekendData}>
  {extractMonthFromWeekendData(0)}/{extractDateFromWeekendData(0)}
</WeekendScheduleDate>
<WeekendScheduleDate value={weekendData}>
  {extractMonthFromWeekendData(1)}/{extractDateFromWeekendData(1)}
</WeekendScheduleDate>
<WeekendScheduleDate value={weekendData}>
  {extractMonthFromWeekendData(2)}/{extractDateFromWeekendData(2)}
</WeekendScheduleDate>
<WeekendScheduleDate value={weekendData}>
  {extractMonthFromWeekendData(3)}/{extractDateFromWeekendData(3)}
</WeekendScheduleDate>
<WeekendScheduleDate value={weekendData}>
  {extractMonthFromWeekendData(4)}/{extractDateFromWeekendData(4)}
</WeekendScheduleDate>
<WeekendScheduleDateSat value={weekendData}>
  {extractMonthFromWeekendData(5)}/{extractDateFromWeekendData(5)}
</WeekendScheduleDateSat>
<WeekendScheduleDateSun>
  {extractMonthFromWeekendData(6)}/{extractDateFromWeekendData(6)}
</WeekendScheduleDateSun>

const WeekendScheduleDate = styled.span`
  margin-right: 1%;
  font-size: 1.2em;
  font-weight: 600;
  color: ${props =>
    props.weekendData &&
    props.weekendData.schedule.map(obj =>
      obj.includes("_") ? "red" : "black"
    )};
`;

const WeekendScheduleDateSat = styled.span`
  margin-right: 1%;
  font-size: 1.2em;
  font-weight: 600;
  color: ${props =>
    props.weekendData &&
    props.weekendData.schedule.map(obj =>
      obj.includes("_") ? "red" : "blue"
    )};
`;

const WeekendScheduleDateSun = styled.span`
  margin-right: 1%;
  font-size: 1.2em;
  font-weight: 600;
  color: red;
`;

當前結果：從 12/20 到 12/25 黑色我猜是默認顏色。

我將衷心感謝您的幫助！

Answer 1

您將 prop value而不是weekendData給您的樣式組件。 此外，不要在樣式組件內執行 map。 獲取之前的值並傳遞一個簡單的值。