React Js有条件地应用类属性

2020/10/02 00:21 · javascript ·  · 0评论

我想有条件地显示和隐藏此按钮组,具体取决于从父组件传入的内容,如下所示:

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

注意“向右拉”后的空格。您不希望偶然提供类“ pull-rightshow”而不是“ pull-right show”。括号也必须存在。

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

在您的情况下,解决方案将如下所示:

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

...

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

作为附带说明,我建议您尝试避免同时使用showhidden类,因此代码可能更简单。很可能您不需要为默认显示的内容设置类。

如果您使用的是Transpiler(例如Babel或Traceur),则可以使用新的ES6“模板字符串”。

这是@ spitfire109的答案,并作了相应修改:

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

这种方法可以让您做类似的事情,呈现s-is-showns-is-hidden

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

您可以在此处使用字符串文字

const Angle = ({show}) => {

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

   return <i className={angle} />
}

花费@ spitfire109的好答案,可以做这样的事情:

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

然后在render函数中:

<div className={this.rootClassNames()}></div>

保持jsx简短

或使用npm classnames这非常容易且有用,特别是对于构造类列表

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

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

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

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

2019年

React是Lake的许多实用程序。但是您不需要任何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( ([k,v]) => v?k:'' ).join(' ');
}

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


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

只是为了灵感

声明辅助元素并使用ittoggle方法

(DOMToken​List)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; 
}

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

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

您可以使用此:

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

这对你有用

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

当您要添加多个类时,这很有用。您可以使用空格将数组中的所有类连接在一起。

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

.filter(Boolean)从数组中删除“ falsey”值。由于类名必须是字符串,因此新的过滤数组中将不包含任何其他内容

例:

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

作为辅助功能:

const cx = (...list) => list.filter(Boolean).join(' ')

<div className={cx('foo', condition && 'bar')} />

您可以使用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">

引用@split fire答案,我们可以使用模板文字对其进行更新,以使其更具可读性,以供参考Checkout javascript模板文字

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
本文地址:http://javascript.askforanswer.com/react-jsyoutiaojiandiyingyongleishuxing.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!