Javascript 干燥剂的研制

当涉及到检查样式化组件中的道具时，在我看来，事情可能会变得非常枯燥

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

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

这是针对我正在创建的

组件的，它只是根据我使用的道具检查文本颜色的变化。例如：

将为其提供我在变量文件中的

颜色
对象中设置的
灯光
颜色

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

关于如何使这个代码更干燥剂有什么想法吗？
这里的问题是，如果用户将
白色
和
黑色
添加到道具中会发生什么？它应该是什么颜色

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

这样，您可以过滤
颜色中的道具，将样式文本添加到其中，然后
。join
将数组转换为字符串

如果只通过一个彩色道具就可以了，但是如果通过了多个道具，它将使用
.map
的最后一种颜色。谢谢——我要检查一下。关于添加两个道具，我不太担心。文本组件应该只有一种颜色，因此用户（在本例中是me）应该确保不添加多个颜色属性。如果他们不小心这样做了，那么他们只能回去选择他们想要的颜色。我认为这和意外添加
颜色：白色没有什么不同；颜色：黑色到一个人的样式表。它工作得很好——谢谢。话虽如此，我想知道我如何能做类似的事情，但道具具有价值。例如
size=xs
（我可以有多个选项，xs、sm、md、lg、xl等）。你知道怎么处理吗？你说的
是什么意思，但是道具有一个值？如果你愿意，你可以提出一个新问题，我试着回答。对不起，我的意思是被标记为接受（我刚刚做了）。关于我的另一个问题，我将发布一个新问题。再次感谢。