有条件地应用类属性

Question

我想有条件地显示和隐藏这个按钮组，这取决于从父组件传递的内容，看起来像这样：

<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'并没有发生任何事情。我做错什么了吗？

Answer 1

如果您使用的是transpiler（如Babel或Traceur），则可以使用新的ES6“模板字符串”。

以下是@spitfire 109的回答，并作了相应的修改：

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

这种方法允许您完成类似的整洁工作，呈现s-is-show或s-is-hidden：

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

Answer 2

正如其他人所评论的，classnames实用程序是当前推荐的在ReactJs中处理条件CSS类名的方法。

在您的情况下，解决方案将如下所示：

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

作为旁注，我建议您尽量避免同时使用show和hidden类，这样代码就更简单了。很可能，您不需要为默认显示的内容设置类。

2021年增编：对于性能改进，您可以将clsx作为替代方案。

Answer 3

大括号位于字符串内部，因此它将作为字符串进行计算。他们需要在外面，所以这应该是可行的：

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

注意“向右拉”后面的空格。您不希望意外地提供类“pullrightshow”而不是“pullrightshow”。括号也需要在那里。