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议你尽量避免使用showhidden类,所以代码可以更简单。 很可能你不需要设置一个类来默认显示一些东西。

如果您使用的是转换器(如Babel或Traceur),则可以使用新的ES6“ 模板string ”。

这里是@ spitfire109的答案,相应修改:

 <div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}> 

这种方法可以让你做这样的整洁的事情,呈现s-is-showns-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> ) } } )