Bagaimanakah Saya Boleh Menambah Berbilang Kelas pada Atribut ClassName Komponen ReactJS?

Berbilang Kelas dalam Komponen ReactJS: Penyelesaian Terperinci

Apabila bekerja dengan ReactJS dan JSX, menambah berbilang kelas pada atribut className komponen boleh tugas biasa. Artikel ini menunjukkan cara untuk mencapai ini dengan literal templat ES6, menawarkan penyelesaian yang bersih dan ringkas.

Pertimbangkan coretan berikut:

<li key={index} className={activeClass, data.class, "main-class"}></li>

Kod ini cuba menggabungkan berbilang nama kelas ke dalam className atribut, tetapi ia secara salah menetapkannya sebagai argumen berasingan kepada harta className. Sebaliknya, kita perlu menggunakan literal templat untuk mencipta rentetan yang mengandungi kelas yang diingini.

Berikut ialah kod yang disemak menggunakan literal templat ES6:

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

Dengan melampirkan nama kelas dalam pendakap kerinting di dalam backtick, kita boleh menggabungkannya menjadi satu rentetan. Sifat className kemudiannya menerima rentetan yang dijana secara dinamik ini, memastikan bahawa komponen mempunyai semua kelas yang ditentukan.

Kaedah lain yang mudah ialah versi satu pelapik:

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

Kami menggunakan ungkapan bersyarat di dalam backtick untuk menogol antara kelas berdasarkan syarat. Dalam contoh ini, kelas 'ralat' ditambahkan hanya jika sifat keadaan yang sah adalah palsu.

Teknik ini menyediakan penyelesaian yang mudah dan elegan untuk menambahkan berbilang kelas pada komponen ReactJS, menjadikannya lebih mudah untuk menggayakan dan meningkatkan kefungsian aplikasi anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Berbilang Kelas pada Atribut ClassName Komponen ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!