制作样式化的组件 DRYer

Question

在检查 Styled Components 中的 props 时，在我看来，事情可能会非常干燥。

例如，让我们看看下面的代码：

  ${props => props.white && `color: ${colors.white}`}
  ${props => props.light && `color: ${colors.light}`}
  ${props => props.grey && `color: ${colors.grey.base}`}
  ${props => props.dark && `color: ${colors.dark}`}
  ${props => props.black && `color: ${colors.black}`}

  ${props => props.info && `color: ${colors.info}`}
  ${props => props.success && `color: ${colors.success}`}
  ${props => props.warning && `color: ${colors.warning}`}
  ${props => props.error && `color: ${colors.error}`}
  ${props => props.link && `color: ${colors.link.base}`}

这是针对我正在创建的<Text> 组件 - 它只是根据我使用的道具检查文本颜色的变化。例如：<Text light> 将赋予它light 我在变量文件中的colors 对象中设置的颜色。

现在，这段代码相当重复。每行唯一变化的是颜色名称——否则完全相同。

关于如何使此代码更干燥的任何想法？

Answer 1

这里的问题是，如果用户将white 和black 添加到props 会发生什么？应该是什么颜色的？

${props => Object.keys(props).filter(x => colors[x]).map(y => `color: ${colors[y]}`).join(' ')}

这样，您正在过滤colors 中的道具，将样式文本添加到其中，.join 是将数组转换为字符串。

如果只传递一个颜色的道具，它会正常工作，但如果传递多个，它将​​进入.map的最后一个颜色。