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

当前回答

参考@split fire answer，我们可以用模板文字来更新它，这样更有可读性，供参考Checkout javascript模板文字

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

2020-02-17 09:41:25

其他回答

简单地使用这种方法——

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

这样就整洁多了。

2022-03-22 07:15:51

如果你只需要一个可选类名:

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

2019-08-25 20:35:42

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

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

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

花括号在字符串内部，因此它被计算为字符串。他们需要在外面，所以这个应该有用:

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

注意“右拉”后面的空格。您不希望意外地提供类“拉右秀”而不是“拉右秀”。括号也要在这里。

2015-05-29 15:18:29

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

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

2017-09-05 08:41:25

React Js有条件地应用类属性

推荐文章

最新文章

标签