时间戳

首页 > 解决方案 > 制作样式化的组件 DRYer

javascript - 制作样式化的组件 DRYer

问题描述

当谈到检查 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

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

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

标签： javascriptreactjsstyled-components

解决方案

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

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

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

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

推荐阅读