如何组合两个 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')};

: 之后的逻辑只有在条件为假时才会发生。

How to combine two JavaScript ternary operators?