сложный условный стиль react-jss

Работаю с react-jss уже несколько недель и пытаюсь найти лучший способ стилизации некоторых компонентов. У меня много условных выражений в этих компонентах, и я стараюсь не создавать слишком много новых компонентов с большим количеством общего кода. Мне нравится, что я могу поместить эту логику в свои стили через JS вместо того, чтобы условно применять имена классов, как мы делали раньше.

Пример одного из моих более сложных стилей:

color:
    props.inactive && (props.buttonType === 'outline' || props.buttonColor === 'red')
    ? colors.greyscaleReg
    : props.buttonColor === 'red'
    ? colors.primaryRed
    : props.buttonType === 'outline'
    ? colors.primaryBlue
    : props.buttonType === 'lightFill'
    ? colors.primaryBlue
    : colors.white,

Я фанат троичных, поэтому у меня нет проблем с разбором этого, хотя некоторые из моих коллег не являются поклонниками троичных, особенно когда они вложены/связаны вот так.

Рекомендуется ли перенести эту логику за пределы стилей?

Одно из предложений состояло в том, чтобы создать функцию для хранения этого кода и вызова этой функции внутри стилей (нельзя использовать внешнюю функцию для наведения, и она не вычисляет ее правильно).

А вот это мне очень не нравится:

backgroundColor: () => {
        if (props.inactive) {
          return colors.greyscaleLight;
        }
        if (!props.loading && !props.inactive) {
          if (props.buttonType === 'outline') {
            return colors.secondaryPaleBlue;
          }
          if (props.buttonType === 'lightFill') {
            return colors.secondarySoftBlue;
          }
        } else if (props.buttonColor === 'red') {
          return colors.secondaryDarkRed;
        }
        return colors.darkPrimaryBlue;
      },

reactjs typescript css react-typescript jss
person standin    schedule 13.07.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Рекомендуется не использовать слишком много вложенных тройных условий. Наилучшей практикой кодирования в javascript является избегание вложенных тернарных кодов в соответствии с eslint - no- правило вложенного тернарного анализа, которое широко используется почти везде, где используется javascript. ESLint – это инструмент статического анализа кода для выявления проблемных шаблонов, обнаруженных в коде JavaScript.

Вы можете использовать условные операторы switch..case или if..else if..else.

Использованная литература:

person Vivek22    schedule 14.07.2020
comment
К сожалению, я не могу использовать переключатель, потому что я сравниваю строки, я знаю, что это возможно, но это очень неэффективно. И я только что обнаружил, что переход к if/else вне jss полностью нарушает правила наведения. - person standin; 15.07.2020

arrow_upward
0
arrow_downward

Попробуйте отделить условную логику от отдельных стилей, используя разные className для разных типов кнопок.

const styles = makeStyles(theme => ({
  inactive: { color: ..., ... },
  outline: { color: ..., ... },
  ...
}))

const MyButton = ({ isInactive, buttonType }) => {
  const { inactive, outline, ... } = useStyles(styles)

  const className = [
    isInactive && inactive,
    buttonType === 'outline' && outline,
    ...
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <button className={className}>
      ...
    </button>
  )
}

В примере используется Material UI/hook-flavor JSS, но принцип должен быть таким же для других вариантов.

person Lionel Rowe    schedule 14.07.2020