通过样式组件中的道具映射 [英] Mapping Through Props in Styled Components

问题描述

如这个答案所述，可以大大简化检查样式组件.例如，比较这段代码:

As noted in this answer it is possible to greatly simplify the amount of code needed to check for props in Styled-Components. For example, compare this code:

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

为此:

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

第一行代码比第二行代码更干燥.

The first line is much DRYer than the second lines of code.

但是，还有其他用例我想简化我的代码，但我不知道如何去做.

However, there are other use cases that I'd like to simplify my code for and I don't know how to do it.

例如，考虑以下代码:

${props => props.small === 'white' && `@media(min-width: 600px) {color: ${colors.white};}`}
${props => props.small === 'light' && `@media(min-width: 600px) {color: ${colors.light};}`}
${props => props.small === 'grey' && `@media(min-width: 600px) {color: ${colors.grey.base};}`}
${props => props.small === 'dark' && `@media(min-width: 600px) {color: ${colors.dark};}`}
${props => props.small === 'black' && `@media(min-width: 600px) {color: ${colors.black};}`}

${props => props.small === 'info' && `@media(min-width: 600px) {color: ${colors.info};}`}
${props => props.small === 'success' && `@media(min-width: 600px) {color: ${colors.success};}`}
${props => props.small === 'warning' && `@media(min-width: 600px) {color: ${colors.warning};}`}
${props => props.small === 'error' && `@media(min-width: 600px) {color: ${colors.error};}`}
${props => props.small === 'link' && `@media(min-width: 600px) {color: ${colors.link.base};}`}

这与我之前的非常相似，除了现在我有一个名为 small 的道具名称，它采用特定值.但是，由于专有名称需要一个值，因此我不能使用上面提到的 Object.keys 解决方案.

This is very similar to what I have before, except for now I have a prop name called small which takes a particular value. However, since the proper name takes a value, I cannot use the Object.keys solution mentioned above.

我想知道的是如何将上面的代码简化成一个简单的javascript语句——类似于上面提到的第一行代码.

What I would like to know is how to simplify the above code into a simple javascript statement - similar to the first line of code mentioned above.

有什么想法吗?

推荐答案

这个很简单，你检查 props.small 是否是 colors 的一个属性，如果是的，只需返回值 colors[props.small].

This one is very simple, you check if props.small is a property of colors and if yes, just return the value colors[props.small].

${props => colors[props.small] && `@media(min-width: 600px) {color: ${colors[props.small]};}`}

这篇关于通过样式组件中的道具映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！