JXS if else class不起作用

时间:2017-02-12 08:57:28

标签: javascript reactjs jsx

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

为什么上面的jsx没有效果?我的item.status值是字符串。但在我的DOM中,我无法看到隐藏类被添加。

2 个答案:

答案 0 :(得分:3)

这是因为你已经将你的三元运算符包装成“所以它被视为字符串。请尝试这样做:

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

答案 1 :(得分:0)

除了@ rahul-pratap-singh所说的,考虑使用名为this.When(/^I authenticate with facebook$/, function (arg1) { // log the ID of the main window console.log('Main Window ID' + windowID.main) browser .pause(2000) .getTabIds().forEach(function (value) { if (value === windowID.main) { // we do not need to do anything with windowID.main as it's already set return } // if the value does not match windowID.main then we know its the new facebook login window windowID.facebook = value }) // log both of these console.log('Main Window ID: ' + windowID.main) console.log('Facebook Window ID: ' + windowID.facebook) // Do the login browser .switchTab(windowID.facebook) .setValue('input[name="email"]', process.env.FACEBOOK_EMAIL) .setValue('input[name="pass"]', process.env.FACEBOOK_PASSWORD) .submitForm('form') }); - link here的漂亮小包,这样你就可以使用它:

classnames

我认为这会导致代码比加入字符串更清晰。

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

import classes from 'classnames';

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