React Js有条件地应用类属性_react 根据条件属性是否可用-CSDN博客

本文翻译自：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>
    );
  }
});

Nothing is happening however, with the {this.props.showBulkActions ? 但是，{this.props.showBulkActions吗？ 'show' : 'hidden'}. 'show'：'hidden'}。 Am I doing anything wrong here? 我在这里做错什么吗？

#1楼

参考：https://stackoom.com/question/2474v/React-Js有条件地应用类属性

#2楼

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". 您不希望偶然提供类“ pull-rightshow”而不是“ pull-right show”。 Also the parentheses needs to be there. 括号也必须存在。

#3楼

As others have commented, classnames utility is the currently recommended approach to handle conditional CSS class names in ReactJs. 正如其他人所评论的那样， classnames实用程序是当前推荐的在ReactJs中处理条件CSS类名称的方法。

In your case, the solution will look like: 在您的情况下，解决方案将如下所示：

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

... ...

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

As a side note, I would suggest you to try to avoid using both show and hidden classes, so the code could be simpler. 附带说明一下，我建议您尝试避免同时使用show和hidden类，因此代码可能会更简单。 Most likely you don't need to set a class for something to be shown by default. 您很可能不需要为默认显示的内容设置类。

#4楼

Expending on @spitfire109's fine answer, one could do something like this: 花费@ spitfire109的好答案，可以做这样的事情：

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

and then within the render function: 然后在render函数中：

<div className={this.rootClassNames()}></div>

keeps the jsx short 保持jsx简短

#5楼

If you are using a transpiler (such as Babel or Traceur) you can use the new ES6 " template strings ". 如果您使用的是Transpiler（例如Babel或Traceur），则可以使用新的ES6“ 模板字符串 ”。

Here is the answer of @spitfire109, modified accordingly: 这是@ spitfire109的答案，并作了相应修改：

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

This approach allows you to do neat things like that, rendering either s-is-shown or s-is-hidden : 这种方法使您可以执行整洁的事情，呈现s-is-shown或s-is-hidden ：

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>

#6楼

Or use npm classnames . 或使用npm classnames 。 It is very easy and useful especially for constructing the list of classes 这非常容易且有用，特别是对于构造类列表