Cara Memaparkan Elemen Reaksi Secara Bersyarat Berdasarkan Props: Panduan untuk UI Dinamik dengan Kumpulan Butang?

Elemen Reaksi Memaparkan Bersyarat Berdasarkan Props

Dalam React, selalunya perlu untuk menunjukkan atau menyembunyikan elemen secara bersyarat berdasarkan data yang dihantar daripada komponen induk . Ini membolehkan pembangun mencipta antara muka pengguna yang dinamik dan responsif.

Satu contoh yang perkara ini biasa berlaku ialah apabila berurusan dengan kumpulan butang. Anda mungkin mahu memaparkan sekumpulan butang hanya jika syarat tertentu dipenuhi. Contohnya, anda mungkin mempunyai kumpulan butang "Tindakan Pukal" yang hanya boleh dilihat jika berbilang item dipilih dalam jadual.

Untuk mencapai ini, anda boleh menggunakan sintaks pemaparan bersyarat dalam kaedah pemaparan React. Format umum ialah:

<code class="javascript">{this.props.showBulkActions ? <ElementToShow /> : null}</code>

Dalam contoh ini, this.props.showBulkActions ialah sifat boolean yang diluluskan daripada komponen induk. Jika ia benar, komponen akan diberikan. Jika tidak, tiada apa yang akan dipaparkan.

Walau bagaimanapun, dalam coretan kod yang disediakan, pendakap kerinting tersilap disertakan dalam rentetan atribut kelas:

<code class="javascript">className=&quot;btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"></code>

Ini menghalang React daripada menilai ungkapan dengan betul . Untuk membetulkannya, pendakap kerinting hendaklah diletakkan di luar rentetan, seperti:

<code class="javascript">className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

Selain itu, pastikan terdapat ruang selepas "tarik-kanan" untuk mengelakkan mencipta nama kelas yang tidak sah. Dengan pelarasan ini, kumpulan butang kini sepatutnya muncul dan hilang secara bersyarat berdasarkan prop showBulkActions.

Atas ialah kandungan terperinci Cara Memaparkan Elemen Reaksi Secara Bersyarat Berdasarkan Props: Panduan untuk UI Dinamik dengan Kumpulan Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!