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

    <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'}。我做错什么了吗?


当前回答

或者使用npm类名。它非常简单和有用,特别是对于构造类列表

其他回答

更优雅的解决方案,更有利于维护和可读性:

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

参考@split fire answer,我们可以用模板文字来更新它,这样更有可读性,供参考Checkout javascript模板文字

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

简单地使用这种方法——

<div className={`${this.props.showActions ? 'shown' : 'hidden'}`}>

这样就整洁多了。

或者使用npm类名。它非常简单和有用,特别是对于构造类列表

替换:

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

:

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