React Js 有条件地应用类属性

IT技术 javascript css twitter-bootstrap-3 reactjs class-attributes
2021-02-04 13:46:44

我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示：

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

6个回答

花括号在字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该有效：

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

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

这在某些classnames可能不合适的情况下特别有用。如果您在render函数中并且有一个map，则您可能只知道是否要在渲染时添加类，因此此答案对此非常有用。
2021-03-16 13:46:44
@apexdodge 您必须进行哪些修改。我有同样的问题。
2021-03-20 13:46:44
谢谢！我不得不稍微修改它，因为出于某种原因它根本没有输出 btn-group pull-right。只是显示或隐藏。
2021-03-28 13:46:44
@RamY 一种方法是将所有类放在 conditional 中 this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')。不优雅，但它有效。
2021-04-02 13:46:44
很好的替代方案，而不是在渲染或返回中使用一堆条件模板
2021-04-11 13:46:44

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

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

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

...

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

作为旁注，我建议您尽量避免同时使用show和hidden类，这样代码会更简单。最有可能的是，您不需要为默认显示的内容设置类。

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

到 2021 年，classnames您可能想尝试clsx而不是
2021-03-25 13:46:44
@anied 在撰写本文时，官方 React 文档中推荐了它：web.archive.org/web/20160602124910/http : //facebook.github.io : 80/...
2021-03-27 13:46:44
您能否详细说明 classNames 实用程序是“当前推荐的方法”吗？这是否在某些备受推崇的最佳实践文档中有所体现？或者只是在 React 和classNames目前的口耳相传？
2021-04-08 13:46:44
最新的文档中仍然提到：“如果你经常发现自己编写这样的代码，classnames 包可以简化它。 ”
2021-04-11 13:46:44

如果您使用的是转译器（例如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'}`}>
使用第二种方法时要小心，尤其是在大型代码库中，因为它会使类字符串的 grepable 降低。例如，如果有人在代码库中搜索s-is-shown或s-is-hidden，他们将找不到此代码。
2021-04-04 13:46:44

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

const Angle = ({show}) => {

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

   return <i className={angle} />
}

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

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" : "null"}`}
其它你可能感兴趣的问题
上一篇将字符串中的单词大写 下一篇通过 AJAX 和 jQuery 使用 HTML5 文件上传