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

当前回答

如果你正在使用一个转译器(如Babel或Traceur)，你可以使用新的ES6“模板字符串”。

以下是@spitfire109的答案，经过了相应的修改:

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

这个方法允许你做一些简洁的事情，呈现s-is-show或s-is-hidden:

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

2016-09-05 13:12:39

其他回答

根据@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简短

2016-05-02 13:53:46

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

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

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

2015-05-29 15:18:29

当您有多个类要追加时，这非常有用。你可以用一个空格来连接数组中的所有类。

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

2019-12-18 20:36:37

<div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div>

不要忘记在静态类名之后添加一个额外的空格。

2022-04-03 04:26:04

如果你正在使用一个转译器(如Babel或Traceur)，你可以使用新的ES6“模板字符串”。

以下是@spitfire109的答案，经过了相应的修改:

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

这个方法允许你做一些简洁的事情，呈现s-is-show或s-is-hidden:

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

2016-09-05 13:12:39

React Js有条件地应用类属性

推荐文章

最新文章

标签