React Js有条件地应用类属性

Question

我想有条件地显示和隐藏此按钮组,具体取决于从父组件传入的内容,如下所示:

<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'}.我在这里做错了吗？

Answer 1

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

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

注意"右拉"后的空格.您不希望意外地提供"pull-rightshow"类而不是"pull-right show".括号也需要在那里.

Answer 2

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

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

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

...

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

作为一个方面说明,我建议你尽量避免同时使用show和hidden类,因此代码可以更简单.很可能您不需要为默认情况下显示的内容设置类.

Answer 3

如果您使用的是转换器(例如Babel或Traceur),则可以使用新的ES6" 模板字符串 ".

以下是@ spitfire109的答案,相应修改:

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

这种方法允许你做这样的整洁的事情,渲染s-is-shown或s-is-hidden:

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

Answer 4

例如，您可以简单地执行以下操作。

let classNameDependsOnCondtion = i18n.language == 'en' ? "classname" : "";

className={`flex flex-col lg:flex-row list-none ${classNameDependsOnCondtion }`}

或者

className={`flex flex-col lg:flex-row list-none ${i18n.language == 'en' ? "classname" : ""}`}

Answer 5

你可以在这里使用字符串文字

const Angle = ({show}) => {

   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

   return <i className={angle} />
}

Answer 6

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean)从数组中删除“错误”值。由于类名必须是strings，因此除此之外的任何内容都不会包含在新的过滤数组中。

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

上面写成一个函数：

const cx = (...list) => list.filter(Boolean).join(' ')

// usage:
<div className={cx('foo', condition && 'bar')} />

console.log(  ['foo', true  && 'bar'].filter(Boolean).join(' ')  )
console.log(  ['foo', false && 'bar'].filter(Boolean).join(' ')  )

Answer 7

在@ spitfire109的完美答案上,可以做到这样的事情:

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

  return names.join(' ');
}

然后在渲染函数中:

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

保持jsx短

Answer 8

只需使用这种方法——

<div className={`${this.props.showActions ? 'shown' : 'hidden'}`}>

这更加整洁和干净。

Answer 9

或者使用npm 类名.它非常简单有用,尤其适用于构造类列表

Answer 10

如果您只需要一个可选的类名：

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

Answer 11

代替：

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

和：

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

Answer 12

更优雅的解决方案，更利于维护和可读性：

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

Answer 13

您可以使用ES6数组代替类名。答案基于Axel Rauschmayer博士的文章：有条件地在Array和对象文字中添加条目。

<div className={[
                 "classAlwaysPresent", 
                 ...Array.from(condition && ["classIfTrue"])
                ].join(" ")} />

Answer 14

2019年

React是Lake的许多实用程序。但是您不需要任何npm包装。只需在某处创建函数classnames并在需要时调用它即可；

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

要么

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' ');
}

例

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

启发奖金

您可以声明helper元素并使用他的

(DOMToken?List)classList.toggle(class,condition)

像这样写

const classes = document.createElement('span').classList; 

function classstate(obj){
 return Object.entries(obj).forEach( ([k,v]) => classes.toggle(k,v) ).value;
}

//Or

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}