JXS if else class 不起作用

Question

{item.status}
<div className="{item.status !== '' ? 'hide' : ''} pull-right">Content</div>

为什么上面的jsx没有效果？我的 item.status 值为字符串。但是在我的 DOM 中，我看不到添加了隐藏 class。

Answer 1

这是因为您将三元运算符包装在 " 中，因此它被视为字符串。试试这个：

{item.status}
<div class={"pull-right "+(item.status !== '' ? 'hide' : '')}>Content</div>

Answer 2

除了 @rahul-pratap-singh 所说的，考虑使用名为 classnames - link here 的漂亮的小包，这样你就可以像这样使用它：

import classes from 'classnames';

// later on 
<div className={classes({
    "pull-right": true,
    "hide": item.status !== '',
})} />

我认为它比连接字符串更简洁。

或者至少使用 es6 字符串插值 - link here

// instead of 
"pull-right "+(item.status !== '' ? 'hide' : '')

// with string interpolation
`pull-right ${item.status.length ? '' : 'hide'}`;

JXS if else class doesn't work