React Js有条件地应用类属性
我想有条件地显示和隐藏这个button组，具体取决于从父组件传入的内容，如下所示：
<TopicNav showBulkActions={this.__hasMultipleSelected} /> ….
__hasMultipleSelected: function() { return false; //return true or false depending on data }
….
var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span className="caret"></span> </button> <ul className="dropdown-menu" role="menu"> <li><a href="#">Merge into New Session</a></li> <li><a href="#">Add to Existing Session</a></li> <li className="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> </div> ); } });
没有任何事情发生，但{this.props.showBulkActions？ 'show'：'hidden'}。 我在这里做错了什么？
花括号在string内部，因此被评估为string。 他们需要在外面，所以这应该工作：
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
请注意“拉右”后的空间。 你不想不小心提供“pull-rightshow”类而不是“pull-right show”。 括号也需要在那里。
正如其他人所说的， classnames实用工具是目前推荐的方法来处理ReactJs中的条件CSS类名称。
在你的情况下，解决scheme将如下所示：
var btnGroupClasses = classNames( 'btn-group', 'pull-right', { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } );
…
<div className={btnGroupClasses}>...</div>
作为一个方面说明，我build议你尽量避免使用show和hidden类，所以代码可以更简单。 很可能你不需要设置一个类来默认显示一些东西。
如果您使用的是转换器（如Babel或Traceur），则可以使用新的ES6“ 模板string ”。
这里是@ spitfire109的答案，相应修改：
<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>
这种方法可以让你做这样的整洁的事情，呈现s-is-shown或s-is-hidden ：
<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>
根据@ spitfire109的正确答案，可以这样做：
rootClassNames() { let names = ['my-default-class']; if (this.props.disabled) names.push('text-muted', 'other-class'); return names.join(' '); }
然后在渲染函数内：
<div className={this.rootClassNames()}></div>
保持jsx短
或者使用npm 类名 。 特别是构build类的列表非常简单和有用
您可以使用ES6数组而不是类名。 答案是基于Axel Rauschmayer博士的文章： 有条件地在Array和Object文本中添加条目 。
<div className={[ "classAlwaysPresent", ...Array.from(condition && ["classIfTrue"]) ].join(" ")} />
我可以find最好的解决scheme，例如追加is-open类来：
const isOpenClass = this.state.isOpen ? ' is-open' : '', className = `gig-card-base add-new-gig add-pro-gig-card${isOpenClass}`; <span className={className}>Something cool</span>
你可以使用像这样的概念
var Count=React.createClass({ getInitialState: function() { var state={counter:1}; setInterval(function(){ this.setState( {counter:this.state.counter+(this.state.counter==1000?9999999999:1)}) }.bind(this),1); return state; }, render:function(){ return( <div> Counter<br/> {this.state.counter} </div> ) } } )
