[解決済み】React Jsでクラス属性を条件付きで適用する。

質問

このボタングループは、次のような親コンポーネントから渡される内容に応じて、条件付きで表示・非表示を切り替えたいと考えています。

<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-right"の後にスペースがあることに注意してください。間違って "pull-right show" の代わりに "pull-rightshow" というクラスを指定しないようにしましょう。また、括弧も必要です。