React Js 有条件地应用类属性

javascript css reactjs twitter-bootstrap-3 class-attributes

2022-08-29 23:17:40

我想有条件地显示和隐藏这个按钮组，这取决于从父组件传入的内容，如下所示：

<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 ？“显示”：“隐藏”}。我在这里做错了什么吗？

答案 1

大括号位于字符串内部，因此它被计算为字符串。他们需要在外面，所以这应该有效：

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

请注意“向右拉”后面的空格。您不想意外地提供类“pull-rightshow”而不是“pull-right show”。括号也需要在那里。

答案 2

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

在您的情况下，解决方案将如下所示：

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

...

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

作为旁注，我建议您尽量避免同时使用和类，以便代码可以更简单。最有可能的是，您不需要为默认情况下显示的内容设置类。showhidden

2021年附录：为了提高性能，您可以查看clsx作为替代方案。