当前位置: 首页 > 知识库问答 >
问题:

有条件地应用类属性

云瑞
2023-03-14

我想有条件地显示和隐藏这个按钮组,这取决于从父组件传递的内容,看起来像这样:

<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'并没有发生任何事情。我做错什么了吗?

共有3个答案

陶博耘
2023-03-14

如果您使用的是transpiler(如Babel或Traceur),则可以使用新的ES6“模板字符串”。

以下是@spitfire 109的回答,并作了相应的修改:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>

这种方法允许您完成类似的整洁工作,呈现s-is-shows-is-hidden

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>
淳于开畅
2023-03-14

正如其他人所评论的,classnames实用程序是当前推荐的在ReactJs中处理条件CSS类名的方法。

在您的情况下,解决方案将如下所示:

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

作为旁注,我建议您尽量避免同时使用showhidden类,这样代码就更简单了。很可能,您不需要为默认显示的内容设置类。

2021年增编:对于性能改进,您可以将clsx作为替代方案。

厍兴腾
2023-03-14

大括号位于字符串内部,因此它将作为字符串进行计算。他们需要在外面,所以这应该是可行的:

<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足