Bagaimanakah Saya Boleh Menambah Kelas Dinamik pada Nama Kelas Statik dalam JSX?

Menambah Kelas Dinamik pada Nama Kelas Manual

Dalam konteks JSX berasaskan JavaScript Babel, anda mungkin menghadapi keperluan untuk menambahkan dinamik kelas kepada senarai kelas sedia ada. Begini cara anda boleh mencapai ini:

Dua Pendekatan Utama:

JavaScript Tradisional:

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

Kaedah ini menggabungkan penggabungan rentetan biasa untuk menambahkan kelas dinamik name.

Versi Templat Rentetan:

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

Di sini, tanda belakang digunakan untuk mencipta templat rentetan yang membenarkan interpolasi ungkapan JavaScript.

Pertimbangan Khusus JSX:

Dalam JSX, kurungan Curly sertakan kod JavaScript, jadi apa sahaja di dalamnya akan dilaksanakan. Walau bagaimanapun, kaveat timbul apabila menggabungkan rentetan JSX dengan kurungan kerinting untuk atribut.

Alternatif:

Sebagai alternatif, anda boleh menggunakan pemalam sifat-kelas transformasi Babel untuk mendayakan kelas tugasan harta dalam bentuk:

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelas Dinamik pada Nama Kelas Statik dalam JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!