如何結合兩個JavaScript三元運算符？

Question

我有兩個布爾類型的變量。 這些是我的React組件之一的道具：

廣泛：錯誤，廣泛：錯誤，

然后，我將這些變量與樣式化組件一起使用，如下所示：

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')};

之后的邏輯:只有當條件是假的情況。