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' : 'hidden')}>

请注意"右拉"后面的空格。您不想意外地提供类"拉右显示"而不是"右拉显示"。括号也需要在那里。

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

如果您使用的是转译器(例如 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'}`}>

例如，

您只需执行以下操作即可。

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

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

const Angle = ({show}) => {
   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;
   return <i className={angle} />
}

替换：

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

跟：

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

如果您只需要一个可选的类名：

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

或者使用 npm 类名。它非常简单和有用，特别是对于构建类列表

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

您可以使用 ES6 数组代替类名。答案基于 Axel Rauschmayer 博士的文章：有条件地在数组和对象文本中添加条目。

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

> 2019

：

反应湖很多实用程序。但是您不需要任何npm软件包。只需在某个地方创建函数classnames并在需要时调用它;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

或

function classnames(obj){
 return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' ');
}

例

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'


 <div className="foo bar {classnames(stateClass)}"> some content </div>

只为灵感

声明帮助程序 DOM 元素并使用它本机toggle方法：

(DOMTokenList)classList.toggle(class,condition)

例：

const classes = document.createElement('span').classList; 
function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean) 从数组中删除"假"值。由于类名必须是字符串，因此除该字符串之外的任何内容都不会包含在新的过滤数组中。

console.log(  ['foo', true  && 'bar'].filter(Boolean).join(' ')  )
console.log(  ['foo', false && 'bar'].filter(Boolean).join(' ')  )

上面写成一个函数：

const cx = (...list) => list.filter(Boolean).join(' ')
// usage:
<div className={cx('foo', condition && 'bar')} />

var cx = (...list) => list.filter(Boolean).join(' ')
console.log(  cx('foo', 1 && 'bar', 1 && 'baz')  )
console.log(  cx('foo', 0 && 'bar', 1 && 'baz')  )
console.log(  cx('foo', 0 && 'bar', 0 && 'baz')  )

更优雅的解决方案，更有利于维护和可读性：

const classNames = ['js-btn-connect'];
if (isSelected) { classNames.push('is-selected'); }
<Element className={classNames.join(' ')}/>

只需使用这种方法--

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

这更加整洁干净。

你可以使用这个：

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

当您有多个类要追加时，这很有用。您可以使用空格连接数组中的所有类。

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

我试图定制我的答案，以在帖子中包含所有可能的最佳解决方案

有许多不同的方法可以完成此操作。

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>

这对你有用

var TopicNav = React.createClass({
render: function() {
let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;
return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

参考@split触发答案，我们可以用模板文字更新它，这样更具可读性，供参考结帐 javascript 模板文字

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

你可以使用这个 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"

根据 this.props.showBulkActions 的值，您可以按如下方式动态切换类。

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

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

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

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

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

基于参数返回正确类的函数(如果存在(

  getClass(param){
    let podClass = 'classA'
    switch(param.toLowerCase()){
        case 'B':
            podClass  = 'classB'
            break;
        case 'C':
            podClass  = 'classC'
            break;
    }
    return podClass
}

现在只需从要应用相应类的div 调用此函数。

 <div className={anyOtherClass + this.getClass(param)}

我成功地使用此逻辑将正确的颜色应用于我的引导表行。

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

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

只为灵感

上面写成一个函数：

1. 类内联

2. 使用值

3. 使用变量

4. 使用 clsx

相关内容

最新更新

热门标签：