React jsx三元运算符多个值答案

【问题标题】：React jsx ternary operator multiple valuesReact jsx三元运算符多个值
【发布时间】：2021-07-20 21:06:55
【问题描述】：

我需要从三元运算符返回多个jsx中的值，在这种情况下2，一个是来自对象的字符串，第二个是字符串。我试过了，但这不起作用。

export const alignMap = {
  left: 'mr-auto',
  center: 'mx-auto',
  right: 'ml-auto',
};

<div className={`${condtion ? (alignMap.left, 'recommended-dish-price') : (alignMap.right, 'dish-price')}`}>{price}</div>

有没有办法像这样从三元运算符返回多个值？

【问题讨论】：

连接字符串，例如`${alignMap.left} recommended-dish-price`
你不能，但是如果两者都是字符串值，你可以先将它们组合起来。

标签： javascript reactjs jsx conditional-operator

【解决方案1】：

请试试这个：

export const alignMap = {
  left: 'mr-auto',
  center: 'mx-auto',
  right: 'ml-auto',
};

<div className={`${condtion ?  (alignMap.left + ' recommended-dish-price') : (alignMap.right + ' dish-price')}`}>{price}</div>

因为, 分隔值将始终返回, 之后的值。

【讨论】：

【解决方案2】：

不需要把事情复杂化，您可以简单地将上面的代码替换为：

<div className={`${condtion ? 'mr-auto recommended-dish-price' : 'ml-auto dish-price'}`}>{price}</div>

另外我不得不提一下，你在单词 "condtion" 中打错了字。我建议您更正拼写。

【讨论】：