Как совместить два троичных оператора JavaScript?

Question

У меня есть две переменные типа boolean.Это реквизиты для одного из моих компонентов React:

wide: false, extraWide: false,

Затем я использую эти переменные со стилизованными компонентами, такими как:

max-width: ${({ wide }) => (wide ? '602px' : '500px')};
max-width: ${({ extraWide }) => (extraWide ? '852px' : '500px')};

Есть ли способ объединить эти две строки в одну?(желаемая логика ниже)

if wide set to 602px
if extraWide set to 852px
else set to 500px

Это лучшее, что я придумал до сих пор.Что ты думаешь?

max-width: ${({ wide, extraWide }) =>
  (wide && '602px') || (extraWide && '853px') || '500px'};

Answer 1

Я бы настоятельно рекомендовал не гнездить троих, но если вы должны .

max-width: ${({ wide }, { extraWide }) => (wide ? '602px' : extraWide ? '852px': '500px')};

Логика после : происходит только в том случае, если условие ложно.