Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menambah Kelas Secara Dinamik untuk Komponen Bertindak balas?

Bagaimanakah Saya Boleh Menambah Kelas Secara Dinamik untuk Komponen Bertindak balas?

Mary-Kate Olsen
Lepaskan: 2024-12-13 01:44:10
asal
837 orang telah melayarinya

How Can I Dynamically Add Classes to React Components?

Mempertingkatkan Nama Kelas Secara Dinamik dalam React

Dalam React, selalunya perlu menambahkan kelas secara dinamik pada set nama kelas yang dipratentukan. Babel menyediakan penyelesaian yang mudah untuk senario ini.

Mencapai Penambahan Kelas Dinamik

Untuk menambah kelas dinamik pada senarai kelas biasa, anda boleh menggunakan pendekatan berikut dalam JSX:

className={'wrapper searchDiv ' + this.state.something}
Salin selepas log masuk

Pecahan kod ini menggabungkan rentetan literal "searchDiv pembalut" dengan nilai this.state.sesuatu untuk mencipta className. Sebagai alternatif, anda boleh menggunakan templat rentetan:

className={`wrapper searchDiv ${this.state.something}`}
Salin selepas log masuk

Kedua-dua penyelesaian ini bergantung pada fakta bahawa dalam JSX, apa-apa yang disertakan dalam kurungan kerinting dilaksanakan sebagai JavaScript. Oleh itu, anda mempunyai fleksibiliti untuk menjana nama kelas secara dinamik menggunakan pembolehubah atau nilai keadaan.

Nota Penting

Walaupun tergoda untuk menggabungkan rentetan JSX dan kurungan kerinting untuk atribut, adalah penting untuk mengelakkan perkara ini. berlatih. Hanya JavaScript dibenarkan dalam kurungan kerinting dalam JSX.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelas Secara Dinamik untuk Komponen Bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan