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

Menambah Kelas Secara Dinamik pada Nama Kelas Manual dalam JSX

Dalam JSX, kita selalunya perlu menambah kelas secara dinamik pada elemen berdasarkan syarat tertentu. Ini memerlukan memanipulasi harta className untuk memasukkan kedua-dua nama kelas statik dan dinamik. Begini cara untuk mencapainya:

Menggunakan Sintaks JavaScript

Anda boleh menggunakan sintaks JavaScript biasa untuk menambah kelas dinamik pada nama kelas manual:

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

Ini akan menggabungkan nama kelas statik "pembungkus" dan "searchDiv" dengan nama kelas dinamik yang ditentukan oleh sifat negeri this.state.something.

Menggunakan Templat Rentetan

Sebagai alternatif, anda boleh menggunakan templat rentetan (literal templat ES6) dengan tanda belakang:

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

Sintaks ini membolehkan anda menginterpolasi ungkapan JavaScript terus ke dalam rentetan, termasuk kelas dinamik nama.

Nota:

Ingat bahawa apa-apa yang disertakan dalam kurungan kerinting dalam JSX ditafsirkan sebagai kod JavaScript. Oleh itu, anda boleh melakukan logik kompleks dan memanipulasi rentetan seperti yang diperlukan dalam atribut className. Walau bagaimanapun, anda tidak boleh menggabungkan rentetan JSX dan kurungan kerinting terus dalam atribut.

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