React Js 有条件地应用类属性 [英] React Js conditionally applying class attributes
问题描述
我想根据从父组件传入的内容有条件地显示和隐藏此按钮组,如下所示:
....
__hasMultipleSelected: function() {返回假;//根据数据返回真或假}
....
var TopicNav = React.createClass({渲染:函数(){返回 (<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">批量操作 <span className="caret"></span>按钮><ul className="dropdown-menu" role="menu"><li><a href="#">合并到新会话</a></li><li><a href="#">添加到现有会话</a></li><li className="divider"></li><li><a href="#">删除</a></li>
);}});
然而,{this.props.showBulkActions 没有发生任何事情?'显示':'隐藏'}.我在这里做错了什么吗?
花括号在字符串内部,所以它被作为字符串计算.他们需要在外面,所以这应该有效:
<div className={"btn-group pull-right" + (this.props.showBulkActions ? 'show' : 'hidden')}>
注意pull-right"后面的空格.您不想意外地提供类pull-rightshow"而不是pull-right show".括号也需要在那里.
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>
);
}
});
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')}>
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屋!