React Js有条件地应用类属性

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

    <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'}。我做错什么了吗?

当前回答

你可以用这个:

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

2019-05-12 11:56:57

其他回答

我已经试图调整我的答案，以包括所有最好的解决方案。

有很多不同的方法可以做到这一点。

1. 类内嵌

<div className={`... ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
  ...
</div>

2. 使用值

var btnClass = classNames(
  ...
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

3.使用变量

let dependentClass = this.props.showBulkActions ? 'show' : 'hidden';

className={`... ${dependentClass }`}

4. 使用clsx

<div className={clsx('...',`${this.props.showBulkActions ? 'show' : 'hidden'}`)}>
  ...
</div>

2023-01-17 02:46:22

或者使用npm类名。它非常简单和有用，特别是对于构造类列表

2017-01-27 13:08:26

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

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

console.log(['foo'， true && 'bar'].filter(Boolean)。Join (' ')) console.log(['foo'， false && 'bar'].filter(布尔值)。Join (' '))

上面写为函数:

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

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

var cx = (.. list) => list.filter(布尔兰)。join (' ') 1、log (ex(’foo’&&游戏机’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,0 &&’baz’))

2020-09-26 10:44:49

根据参数(如果存在)返回正确类的函数

  getClass(param){
    let podClass = 'classA'
    switch(param.toLowerCase()){
        case 'B':
            podClass  = 'classB'
            break;
        case 'C':
            podClass  = 'classC'
            break;
    }
    return podClass
}

现在只需从将要应用相应类的div中调用该函数。

 <div className={anyOtherClass + this.getClass(param)}

我成功地使用这个逻辑将正确的颜色应用到我的引导表行。

2020-10-27 08:38:58

这对你有用

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

2018-09-28 17:45:10

React Js有条件地应用类属性

推荐文章

最新文章

标签