制作带样式的组件 DRYer

Question

当谈到在 Styled Components 中检查 props 时，在我看来，事情可能会很 DRYer。

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

  ${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

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

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

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

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

制作带样式的组件 DRYer

Making Styled Components DRYer

javascript

reactjs

styled-components