时间戳

首页 > 解决方案 > 通过样式化组件中的道具进行映射

javascript - 通过样式化组件中的道具进行映射

问题描述

如本答案所述，可以大大简化检查Styled-Components. 例如，比较这段代码：

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

第一行比第二行代码干得多。

但是，还有其他用例我想简化我的代码，但我不知道该怎么做。

例如，考虑以下代码：

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

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

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

有任何想法吗？

标签： javascriptreactjsstyled-components

解决方案

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

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

推荐阅读