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

之后的逻辑:只有当条件是假的情况。