Question

在检查样式化组件中的道具时，在我看来，这可能是很多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颜色。

现在，此代码相当重复。每行唯一更改的是颜色名称-否则它完全相同。

关于如何使此代码成为DRYer的任何想法？

Answer 1

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

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

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

如果仅传递了一个彩色的道具，它会正常工作，但是如果传递了一个以上的道具，它将以.map的最后一个颜色出现。

制作样式组件DRYer

1 个答案: