如何组合两个JavaScript三元运算符？

我有两个布尔型变量。以下是我的React组件之一的道具：

宽：错， 超宽：假

然后我将这些变量与样式化组件一起使用，如下所示：

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

有没有办法把这两条线合并成一条？（所需逻辑如下）

这是到目前为止我想到的最好的。你的想法是什么

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

---

我强烈建议不要筑巢，但如果你必须的话

---

：

后面的逻辑只有在条件为false时才会发生。

当然，不要使用三元。您正在创建一个可读性问题。对您的每个回复都已经涉及到这一点，但可读性在代码中非常重要。稍后再回到代码，查看一个小而复杂的混乱会使以后更难理解（和更改）。注重功能和可读性。您可以在以后的版本中对其进行压缩。

max width:${（{wide，extraWide}）=>500+wide*102+extraWide*353}比我拥有的好多了。。谢天谢地，我们非常同意不嵌套ternaries，但是有一些适用的用例可以这样做。看：这都是适用的。但是，从严格掌握嵌套ifs或链接ifs的开发人员的数量（如果您想遵循该文章的详细内容）与严格掌握嵌套/链接ifs的开发人员的数量相比，这个数量（imho）很可能与if语句不平衡。考虑到一个涉及团队的工作环境，您必须考虑到其他开发人员@Stevenstark另外，使用ternaries将使您成为一名更好的开发人员。哈哈，这是文章中非常自以为是的观点。你可以整天使用ternaries，成为一个糟糕的程序员。@Taplar是的，确实是这样，但看到这两种观点总是很有趣的。我还是不喜欢我的，我更喜欢可读性。
max-width: ${({ wide, extraWide }) =>
  (wide && '602px') || (extraWide && '853px') || '500px'};

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