Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam Reaksi Tanpa Isu Interpolasi Rentetan?

Menggunakan Atribut Kelas Secara Bersyarat dalam React

Dalam React, menggunakan atribut kelas secara dinamik berdasarkan prop boleh berguna untuk menunjukkan atau menyembunyikan elemen secara bersyarat. Walau bagaimanapun, satu isu biasa ialah pendakap kerinting yang digunakan untuk semakan bersyarat mungkin disalahtafsirkan sebagai interpolasi rentetan.

Soalan:

Seorang pengguna cuba memaparkan kumpulan butang secara bersyarat berdasarkan prop daripada komponen induk. Coretan kod adalah seperti berikut:

<div classname="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<p>Masalahnya ialah pendakap kerinting dinilai sebagai rentetan dan tiada apa-apa yang dipaparkan.</p>
<p><strong>Jawapan:</strong></p>
<p>Isunya terletak pada peletakan pendakap kerinting yang tidak betul dalam rentetan. Untuk menilai pernyataan bersyarat dengan betul, pendakap hendaklah diletakkan di luar rentetan:</p>
<pre class="brush:php;toolbar:false"><div classname='{"btn-group' pull-right :>
<p>Ini memastikan pernyataan bersyarat dinilai terlebih dahulu dan hasilnya digabungkan dengan rentetan kelas. Ambil perhatian bahawa ruang selepas "tarik-kanan" adalah penting untuk mengelakkan gabungan kelas secara tidak sengaja (cth., "pertunjukan tarik-kanan" dan bukannya "pertunjukan tarik-kanan"). Selain itu, kurungan diperlukan untuk memastikan penilaian yang betul.</p>
<p>Dengan membuat pelarasan ini, kumpulan butang kini akan muncul atau hilang seperti yang dijangkakan berdasarkan nilai prop showBulkActions daripada komponen induk.</p>
</div>