Sınıf özniteliklerini koşullu olarak uygulayarak J'lere tepki verme

Koşullu olarak göstermek ve bu gibi görünüyor ana bileşen ne geçti bağlı olarak bu düğme grubunu gizlemek istiyorum:

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

Ancak {this.props.showBulkActions? 'show': 'gizli'}. Burada yanlış bir şey mi yapıyorum?

Kıvırcık parantezler dizenin içindedir, bu nedenle dize olarak değerlendirilmektedir. Dışarıda olmaları gerekiyor, bu yüzden işe yarayacak:

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

"Sağa çek" sonrasındaki boşluğa dikkat edin. "Sağa açılan şov" yerine yanlışlıkla "çekme hakkı gösterisi" sınıfını vermek istemezsiniz. Ayrıca parantezlerin orada olması gerekir.

Diğerleri yorumladı var gibi, classnames yarar ReactJs koşullu CSS sınıf adlarını işlemek için şu anda önerilen yaklaşımdır.

Sizin durumunuzda, çözüm şöyle görünecektir:

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

...

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

Bir yan not olarak, hem kullanmaktan kaçınmak için denemenizi öneririm showve hiddenkod basit olabilir, böylece sınıflar. Büyük olasılıkla bir şeyin varsayılan olarak gösterilmesi için bir sınıf ayarlamanız gerekmez.

Bir aktarıcı ( Babel veya Traceur gibi) kullanıyorsanız, yeni ES6 " şablon dizelerini " kullanabilirsiniz.

İşte @ spitfire109'un buna göre değiştirilmiş cevabı:

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

Bu yaklaşım, ya s-is-shownda aşağıdakileri oluşturarak böyle düzgün şeyler yapmanıza izin verir s-is-hidden:

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

Burada kullanabilirsiniz Dize değişmez değerleri

const Angle = ({show}) => {

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

   return <i className={angle} />
}

@ Spitfire109'un iyi cevabına dayanarak, böyle bir şey yapılabilir:

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

  return names.join(' ');
}

ve ardından oluşturma işlevi içinde:

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

jsx'i kısa tutar

Veya npm sınıf adlarını kullanın . Özellikle sınıf listesini oluşturmak için çok kolay ve kullanışlıdır

Yalnızca bir isteğe bağlı sınıf adına ihtiyacınız olacak:

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

Sınıf adları yerine ES6 dizilerini kullanabilirsiniz. Cevap Dr. Axel Rauschmayer makalesine dayanıyor: Koşullu olarak Array ve nesne değişmezleri içine girişler ekleme .

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

2019:

Tepki göl bir çok yardımcı programdır. Ama bunun için herhangi bir npmpakete ihtiyacınız yok . sadece bir yerde fonksiyon yaratın classnamesve ihtiyacınız olduğunda çağırın;

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

veya

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

misal

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

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

Sadece İlham İçin

beyan yardımcı eleman ve bu kullanılan toggleyöntem

(DOMToken​List)classList.toggle(class,condition)

misal:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}

Bakım ve okunabilirlik için daha iyi olan daha zarif çözüm:

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

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

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

bunu kullanabilirsiniz:

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

Bu senin için işe yarar

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

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

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

Bu npm paketini kullanabilirsiniz . Her şeyi idare eder ve bir değişkene veya işleve dayalı statik ve dinamik sınıflar için seçeneklere sahiptir.

// 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"

Değerinize bağlı this.props.showBulkActionsolarak sınıfları dinamik olarak aşağıdaki gibi değiştirebilirsiniz.

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

Sınıfın bir parçası olarak değişken bir içerik de kullanabileceğinizi eklemek istiyorum

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

Bağlam bir bot ve kullanıcı arasındaki sohbettir ve stiller gönderene bağlı olarak değişir, bu tarayıcı sonucudur:

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

Eklenecek birden fazla sınıfınız olduğunda bu yararlıdır. Dizideki tüm sınıfları boşlukla birleştirebilirsiniz.

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

Değiştir:

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

ile:

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

@Split yangın cevap Referans biz Başvuru için, daha okunabilir olan şablon değişmezleri ile güncelleyebilirsiniz Ödeme JavaScript şablon değişmezi

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

Bulduğum bu bir Üçlü ile ve classnames Library ile nasıl yapılacağını açıklar