ReactJS menambahkan kelas dinamis ke nama kelas manual

158

Saya perlu menambahkan kelas dinamis ke daftar kelas reguler, tetapi tidak tahu caranya (saya menggunakan babel), sesuatu seperti ini:

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

Ada ide?

css reactjs

— Mankind1023
sumber

Jawaban yang berguna untuk rejimen gaya praktik terbaik di tautan

— Rahil Ahmad

241

Anda dapat melakukan ini, JavaScript normal:

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

atau versi templat string, dengan backticks:

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

Kedua jenis ini tentu saja hanya JavaScript, tetapi pola pertama adalah jenis tradisional.

Bagaimanapun, di JSX, apa pun yang tertutup kurung keriting dieksekusi sebagai JavaScript, jadi Anda pada dasarnya dapat melakukan apa pun yang Anda inginkan di sana. Tetapi menggabungkan string JSX dan kurung keriting adalah hal yang tidak perlu untuk atribut.

— dannyjolie
sumber

dan apa dalam kasus beberapa kelas?

— Pardeep Jain

5

Dalam kasus beberapa kelas dinamis, semua kelas dinamis harus berasal dari negara, artinya tidak mungkin digunakan element.classList.add("my-class"); Oleh karena itu memungkinkan untuk:

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

— Kevin Farrugia

className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Ini tidak berhasil. Adakah yang tahu mengapa?

— kryptokinght

54

Tergantung pada berapa banyak kelas yang dinamis Anda perlu menambahkan sebagai proyek Anda tumbuh itu mungkin bernilai memeriksa keluar classnames utilitas oleh JedWatson di GitHub. Ini memungkinkan Anda untuk mewakili kelas kondisional Anda sebagai objek dan mengembalikan yang mengevaluasi ke true.

Jadi sebagai contoh dari dokumentasi Bereaksi:

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

}

Karena Bereaksi memicu re-render ketika ada perubahan status, nama kelas dinamis Anda ditangani secara alami dan tetap mengikuti status komponen Anda.

— Brad Colthurst
sumber

5

Penggunaan classNames untuk hal yang begitu sederhana adalah hal yang berlebihan. Hindari menggunakannya dan pilih jawaban sederhana dannyjolie

— daftar periksa

2

Apakah Anda yakin itu hal yang sederhana? Dekat selalu Anda ingin memiliki kontrol penuh berbutir halus atas kelas apa yang diterapkan pada elemen.

— Dragas

5

@checklist Saya berpendapat sebaliknya, paket classnames adalah 1.1kB sebelum Gzipping (dan setengah kB setelah Gzipping), tidak memiliki dependensi, dan menyediakan API yang jauh lebih bersih untuk manipulasi nama kelas. Tidak perlu terlalu dini mengoptimalkan sesuatu yang begitu kecil, ketika API jauh lebih ekspresif. Saat menggunakan manipulasi string standar, Anda harus ingat untuk memperhitungkan spasi, baik sebelum setiap nama kelas bersyarat, atau setelah setiap nama kelas standar.

— tomhughes

classNames hebat, saya menemukan bahwa membaca, menambah, dan memperbaiki alat peraga lebih mudah daripada manipulasi manual karena komponen tumbuh dalam kompleksitas.

— MiFiHiBye

37

Sintaks yang mungkin sederhana adalah:

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

— oligopol
sumber

25

Ini adalah Opsi Terbaik untuk className Dinamis, lakukan saja beberapa penggabungan seperti yang kita lakukan dalam Javascript.

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

— Saad Mirza
sumber

Ini adalah solusi terbaik tanpa masalah linting. Bekerja seperti pesona. Terima kasih.

— Royal.O

3

Jika Anda memerlukan nama gaya yang akan muncul sesuai dengan kondisi negara bagian, saya lebih suka menggunakan konstruksi ini:

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

— Sergey Gubarev
sumber

2

coba ini menggunakan kait:

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

dan tambahkan ini di atribut className:

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

untuk menambah kelas:

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

untuk menghapus kelas:

        const deleteClass= classToDelete => {

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

        }

— Hamza Khattabi
sumber

1

Anda dapat menggunakan paket npm ini . Ini menangani semuanya dan memiliki opsi untuk kelas statis dan dinamis berdasarkan variabel atau fungsi.

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

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
sumber

-1

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

Solusi ini dicoba dan diuji dalam React SPFx.

Tambahkan juga pernyataan impor:

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

— Harjot Singh
sumber