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" : "")}>

2019-08-25 20:35:42

其他回答

基于this.props.showBulkActions的值，您可以动态地切换类，如下所示。

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

2019-05-09 11:08:15

我想补充的是，你也可以使用一个变量内容作为类的一部分

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

上下文是机器人和用户之间的聊天，样式根据发送者而改变，这是浏览器的结果:

<img src="http://imageurl" alt="Avatar" class="img-bot">

2019-05-15 00:44:04

你可以使用这个npm包。它处理所有事情，并基于变量或函数为静态类和动态类提供选项。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"

2017-12-03 18:27:34

正如其他人评论的那样，classnames实用程序是目前在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作为替代方案。

2016-03-01 09:08:08

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

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

2020-02-17 09:41:25

React Js有条件地应用类属性

推荐文章

最新文章

标签