React Js有条件地应用类属性 [英] React Js conditionally applying class attributes

问题描述

我想有条件地显示和隐藏此按钮组，取决于从父组件传递的内容，如下所示：

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this:

<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'}。我在这里做错了什么？

Nothing is happening however, with the {this.props.showBulkActions ? 'show' : 'hidden'}. Am I doing anything wrong here?

推荐答案

花括号在字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该工作：

The curly braces are inside the string, so it is being evaluated as string. They need to be outside, so this should work:

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

注意pull-right后的空格。你不想不小心提供类pull-righthow而不是pull-right show。此外，括号需要在那里。

Note the space after "pull-right". You don't want to accidentally provide the class "pull-rightshow" instead of "pull-right show". Also the parentheses needs to be there.

这篇关于React Js有条件地应用类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！