我想有条件地显示和隐藏这个按钮组,这取决于从父组件传递的内容,看起来像这样:
<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'并没有发生任何事情。我做错什么了吗?
如果您使用的是transpiler(如Babel或Traceur),则可以使用新的ES6“模板字符串”。
以下是@spitfire 109的回答,并作了相应的修改:
<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>
这种方法允许您完成类似的整洁工作,呈现s-is-show
或s-is-hidden
:
<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>
正如其他人所评论的,classnames实用程序是当前推荐的在ReactJs中处理条件CSS类名的方法。
在您的情况下,解决方案将如下所示:
var btnGroupClasses = classNames(
'btn-group',
'pull-right',
{
'show': this.props.showBulkActions,
'hidden': !this.props.showBulkActions
}
);
...
<div className={btnGroupClasses}>...</div>
作为旁注,我建议您尽量避免同时使用show
和hidden
类,这样代码就更简单了。很可能,您不需要为默认显示的内容设置类。
2021年增编:对于性能改进,您可以将clsx作为替代方案。
大括号位于字符串内部,因此它将作为字符串进行计算。他们需要在外面,所以这应该是可行的:
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
注意“向右拉”后面的空格。您不希望意外地提供类“pullrightshow”而不是“pullrightshow”。括号也需要在那里。
问题内容: 我想有条件地显示和隐藏此按钮组,具体取决于从父组件传入的内容,如下所示: .... .... 但是,{this.props.showBulkActions吗?’show’:’hidden’}。我在这里做错什么吗? 问题答案: 大括号位于字符串内,因此被评估为字符串。他们需要在外面,所以应该可以工作: 注意“向右拉”后的空格。您不希望偶然提供类“ pull-rightshow”而不是“
在html: 在cmsText.js中 在cmsText.html 我希望输入标签中的“必需”字仅在设置为true时显示,在设置为false时该字消失。有人能帮忙吗?
问题内容: 我正在使用“可拖动”指令来支持图像拖动。但是,根据用户的角色,我需要为某些用户组禁用图像拖动。我使用了以下代码。 该方法在模板范围内,并返回或。我不想为所返回的每个值创建两个大的重复元素。换句话说,我不是在寻找以下方法来解决此问题。 还有其他方法可以避免代码重复吗? 问题答案: Angular包含对有条件声明HTML属性的支持,作为动态标题指令。 的官方文件 例 在您的情况下,代码可能
更准确地说,我甚至想要更详细的东西:目标应该是一个包含三个属性的类,其中产生的目标值必须被拆分为三个属性。例如,如果mysource.propa的值为“abc”,那么目标myTarget应该得到一个类似于“v01.123.456.ab”的值。该值依次分为preValue、middleValue和endvalue: preValue=“V01” middleValue=“123.456”
问题内容: 我需要能够根据作用域上的布尔变量向元素添加例如“ contenteditable”。 使用示例: 如果设置为,将导致contenteditable = true被添加到元素。有一些简单的方法可以实现这种ng- class这样的属性行为吗?我正在考虑编写指令,如果没有,请共享。 编辑: 我可以看到我提议的attrs指令和ng-bind- attrs 之间似乎有些相似之处,但是在1.0.0
问题内容: 如果满足特定条件,是否有办法仅向React组件添加属性? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应解释我想要的内容,但将无法正常工作(解析错误:意外的标识符)。 问题答案: 显然,对于某些属性,如果您传递给它的值不真实,React足