Создание Стильных Компонентов СУХОЙ

Question

Когда дело доходит до проверки реквизита в Styled Components, мне кажется, что вещи могут быть намного СУЩЕСТВУЮЩИМ.

Например, давайте посмотрим на следующий код:

  ${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.