React jsx三元运算符多个值

Question

我需要从三元运算符返回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>

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

Answer 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>

由于,分隔的值总是在,之后返回值。

Answer 2

无需将事情复杂化，你可以简单地用以下代码替换上面的代码：

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

我还必须提到，你在单词"中拼写错误；condion"。我建议你改正拼写。