在样式组件中处理枚举道具的最佳方法是什么

Question

我将样式组件与打字稿结合使用

假设我有一个打字稿枚举

 enum MessageLevel {
   info,
   warning,
   danger
 }

我有一个样式化的文本组件，它应该根据传递给它的属性改变文本颜色(green, yellow, red)。

根据 styled-components 文档，我可以这样做。

但是这段代码看起来很混乱。可能还有其他解决方案？

const Message = styled.div<{ level: MessageLevel }>`
  ${(props) =>
    props.level === MessageLevel.low &&
    css`color: green;`
  }
  ${(props) =>
    props.level === MessageLevel.warning &&
    css`color: yellow;`
  }
  ${(props) =>
    props.level === MessageLevel.danger &&
    css`color: yellow;`
  }
`;

Answer 1

您可以将 props.level 检查合并为一行以清理代码 as-is。在我的示例中，我使用的是三元组，它需要其中一个选项是 default/fallback。我在示例中使用了“灰色”，但如果您愿意，可以使用 green/yellow/red：

const Message = styled.div<{ level: MessageLevel }>`
  color: ${(props) =>
    props.level === MessageLevel.low
      ? "green"
      : props.level === MessageLevel.warning
      ? "yellow"
      : props.level === MessageLevel.danger
      ? "red"
      : "gray"}
`;

您还可以制作一个映射，将您的枚举值映射到一个颜色值，并使用它代替条件。我认为这更干净：

const messageLevelColorMap = {
  [MessageLevel.low]: "green",
  [MessageLevel.warning]: "yellow",
  [MessageLevel.danger]: "red",
}

const Message = styled.div<{ level: MessageLevel }>`
  color: ${(props) => messageLevelColorMap[props.level]}
`;

在样式组件中处理枚举道具的最佳方法是什么

What is the best way to handle enum prop in styled-components

reactjs

styled-components