Bagaimana Menambah Kelas Secara Dinamik untuk Bertindak Elemen Menggunakan Babel?

Penambahan Kelas Dinamik di Babel

Apabila bekerja dengan kandungan dinamik, selalunya perlu menambah kelas tambahan pada elemen. Dalam aplikasi React yang menggunakan Babel, ini boleh dicapai melalui atribut className.

Soalan:

Bagaimanakah kelas dinamik boleh ditambahkan pada senarai kelas sedia ada? Sebagai contoh, komponen React dengan className "searchDiv pembalut" perlu dikemas kini secara dinamik kepada "searchDiv pembalut {this.state.something}".

Jawapan:

Terdapat dua pendekatan untuk mencapai ini:

1. Kaedah JavaScript Tradisional:

Tambah kelas tambahan dalam atribut className menggunakan JavaScript, seperti:

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

2. Kaedah Templat Rentetan:

Gunakan tanda belakang untuk mencipta templat rentetan, yang membolehkan kod yang lebih bersih dan ringkas:

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

Dalam kedua-dua kaedah, kurungan kerinting mengandungi kod JavaScript, membenarkan pengubahsuaian rentetan dan penambahan nilai dinamik. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa menggabungkan rentetan JSX dan kurungan kerinting dalam atribut tidak disokong.

Atas ialah kandungan terperinci Bagaimana Menambah Kelas Secara Dinamik untuk Bertindak Elemen Menggunakan Babel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!