Сложный условный стиль react-jss - PullRequest
Новая
       125

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

0 голосов
/ 14 июля 2020

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

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

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,

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

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

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

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

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;
      },

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Рассмотрите возможность отделения условных logi c от отдельных стилей, используя разные className s для разных типов кнопок. 

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 / JSS, но принцип должен быть таким же для других вкусов.

0 голосов
/ 14 июля 2020

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

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

Ссылки:

...