在 Styled-Component 中传递道具不起作用（使用功能组件）答案

【问题标题】：Passing props in Styled-Component didn't work(with functional component)在 Styled-Component 中传递道具不起作用（使用功能组件）
【发布时间】：2022-01-23 11:16:05
【问题描述】：

现在，我才刚刚开始学习 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 黑色我猜是默认颜色。

非常感谢您的帮助！

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

您将 value 而不是 weekendData 传递给您的样式组件。另外，不要在样式化的组件内做地图。获取之前的值并传递一个简单的值。

const WeekendScheduleDate = styled.span`
  margin-right: 1%;
  font-size: 1.2em;
  font-weight: 600;
  color: ${({color}) => color};
`;

const color = weekendData.schedule[0].includes("_") ? "red" : "black";

<WeekendScheduleDate color={color}>
  {extractMonthFromWeekendData(3)}
</WeekendScheduleDate>

【讨论】：

首先感谢您的关注。如果我想通过“weekendData”我该怎么办？
我更新了我的评论。在周末数据上制作地图没有任何意义，因为您需要检索一个简单的颜色，而不是返回一个颜色数组。因此，我检查了 const 中的颜色，然后将 color 属性传递给样式化组件。