我想有条件地显示和隐藏此按钮组,具体取决于从父组件传入的内容,如下所示:
<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’}。我在这里做错什么吗?
大括号位于字符串内,因此被评估为字符串。他们需要在外面,所以应该可以工作:
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
注意“向右拉”后的空格。您不希望偶然提供类“ pull-rightshow”而不是“ pull-right show”。括号也必须存在。