親コンポーネントから渡される内容に応じて、このボタン グループを条件付きで表示または非表示にしたいのですが、次のようになります。
<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'}何か間違ったことをしているのでしょうか?
ベストアンサー1
中括弧は文字列の内側にあるため、文字列として評価されます。中括弧は外側にある必要があるため、次のように記述すると機能します。
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
「pull-right」の後のスペースに注意してください。誤って「pull-right show」クラスではなく「pull-rightshow」クラスを指定しないようにする必要があります。また、括弧も必要です。