Bagaimana untuk Menambah Berbilang Kelas pada Komponen ReactJS dengan Literal Templat?

Menambah Berbilang Kelas pada Komponen ReactJS Menggunakan Literal Templat

Untuk menambah berbilang kelas pada komponen dalam ReactJS, anda boleh menggunakan literal templat ES6. Kaedah ini menyediakan cara yang ringkas dan cekap untuk menggabungkan rentetan dan pembolehubah menjadi satu ungkapan.

Langkah 1: Tentukan Pembolehubah Kelas

Dalam kaedah pemaparan komponen anda, tentukan a pembolehubah untuk menyimpan kelas yang anda mahu tambah. Contohnya:

const activeClass = this.state.focused === index ? 'active' : '';

Pembolehubah ini secara bersyarat menetapkan kelas 'aktif' berdasarkan keadaan komponen.

Langkah 2: Gunakan Literal Templat untuk Menggabungkan Kelas

Templat literal membolehkan anda menggunakan tanda belakang (`) untuk mencipta rentetan berbilang baris. Dalam rentetan, benamkan pembolehubah kelas menggunakan sintaks ${}.

const classes = `${activeClass} data.class main-class`;

Baris ini menggabungkan pembolehubah 'activeClass', 'data.class' dan 'kelas utama' ke dalam rentetan tunggal.

Langkah 3: Berikan kepada className Attribute

Dalam elemen JSX, tetapkan pembolehubah 'classes' kepada atribut 'className'. Ini akan menggunakan semua kelas pada elemen.

<li key={index} className={classes}>...</li>

Penyelesaian Satu Pelapik

Anda boleh menggabungkan langkah ini menjadi satu baris menggunakan versi satu pelapik :

const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;

di mana 'this.state.valid' ialah pembolehubah keadaan yang menambahkan kelas 'ralat' secara bersyarat.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Berbilang Kelas pada Komponen ReactJS dengan Literal Templat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!