ReactJS, manuel sınıf adlarına dinamik sınıf ekler

158

Düzenli sınıflar listesine dinamik bir sınıf eklemeniz gerekir, ancak (babil kullanıyorum), böyle bir şey hakkında hiçbir fikrim yok:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

Herhangi bir fikir?

css reactjs

— Mankind1023
kaynak

Reatjs styling en iyi uygulama için yararlı cevaplar bağlantı

— Rahil Ahmad

241

Bunu normal JavaScript’te yapabilirsiniz:

className={'wrapper searchDiv ' + this.state.something}

veya dize şablon sürümü, ters tırnaklarla:

className={`wrapper searchDiv ${this.state.something}`}

Her iki tür de elbette sadece JavaScript'tir, ancak ilk desen geleneksel türdür.

Her neyse, JSX'te, süslü parantez içindeki herhangi bir şey JavaScript olarak yürütülür, böylece temelde orada ne istersen yapabilirsiniz. Ancak JSX dizelerini ve kıvırcık köşeli parantezleri birleştirmek , öznitelikler için işe yaramaz .

— dannyjolie
kaynak

ve birden fazla sınıf durumunda ne olur?

— Pardeep Jain

5

Birden çok dinamik sınıf söz konusu olduğunda, tüm dinamik sınıflar devletten gelmelidir, yani kullanmak mümkün değildir element.classList.add("my-class"); Bu nedenle:

className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}

— Kevin Farrugia

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Bu işe yaramıyor. Neden biri söyleyebilir mi?

— kryptokinght

54

Projeniz büyüdükçe kaç tane dinamik sınıf eklemeniz gerektiğine bağlı olarak , GitHub'daki JedWatson'un sınıf adları yardımcı programına bakmaya değer . Koşullu sınıflarınızı bir nesne olarak temsil etmenizi sağlar ve doğru olarak değerlendirilenleri döndürür.

React belgelerinden bir örnek olarak:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

React, bir durum değişikliği olduğunda yeniden oluşturmayı tetiklediğinden, dinamik sınıf adlarınız doğal olarak işlenir ve bileşeninizin durumu ile güncel kalır.

— Brad Colthurst
kaynak

5

Bu kadar basit bir şey için classNames kullanımı aşırı bir işlemdir. Kullanmaktan kaçının ve dannyjolie'nin basit cevabını tercih edin

— kontrol listesi

2

Bunun basit bir şey olduğundan emin misiniz? Neredeyse her zaman, öğelere hangi sınıfların uygulandığı üzerinde ince taneli tam kontrol sahibi olmak istersiniz.

— Dragas

5

@checklist Aksi takdirde iddia ediyorum, sınıf adları paketi Gzipping önce 1.1kB (ve Gzipping sonra yarım kB), bağımlılıkları yoktur ve sınıf adı manipülasyonu için çok daha temiz bir API sağlar. API çok daha etkileyici olduğunda bu kadar küçük bir şeyi zamanından önce optimize etmeye gerek yoktur. Standart dize manipülasyonu kullanırken, her koşullu sınıf adından önce veya her standart sınıf adından sonra aralıkları hesaba katmayı unutmayın.

— tomhughes

classNames harika, bileşen karmaşıklığı arttıkça sahne okuma, ekleme ve sabitlemenin manuel manipülasyondan daha kolay olduğunu buldum.

— MiFiHiBye

37

Basit bir olası sözdizimi:

<div className={`wrapper searchDiv ${this.state.something}`}>

— oligopol
kaynak

26

İşte Dinamik className için En İyi Seçenek, sadece Javascript'te yaptığımız gibi birleştirme yapın.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

— Saad Mirza
kaynak

Bu, herhangi bir linting sorunu olmadan en iyi çözümdür. Bir cazibe gibi çalıştı. Teşekkür ederim.

— Royal.O

3

Durum durumuna göre görünmesi gereken stil adlarına ihtiyacınız varsa, bu yapıyı kullanmayı tercih ederim:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

— Sergey Gubarev
kaynak

2

kanca kullanarak deneyin:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

ve className özniteliğine ekleyin:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

sınıf eklemek için:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

sınıfı silmek için:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

— Hamza Khattabi
kaynak

1

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', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

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

— Tushar Sharma
kaynak

1

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

— Harshvardhan Singh Baghel
kaynak

-1

className={css(styles.mainDiv, 'subContainer')}

Bu çözüm React SPFx içinde denenmiş ve test edilmiştir.

Ayrıca içe aktarma ifadesi ekleyin:

import { css } from 'office-ui-fabric-react/lib/Utilities';

— Harjot Singh
kaynak