Bagaimana untuk Menggunakan Atribut Kelas Secara Bersyarat dalam React untuk Kawalan UI Dinamik?

Menggunakan Atribut Kelas Secara Bersyarat dalam React

React menyediakan cara mudah untuk menggunakan atribut kelas secara bersyarat pada elemen berdasarkan syarat tertentu. Ini membolehkan pembangun mengawal penampilan atau gelagat elemen UI secara dinamik bergantung pada keadaan aplikasi.

Pertimbangkan senario berikut di mana anda ingin menunjukkan atau menyembunyikan kumpulan butang secara bersyarat berdasarkan sifat boolean yang diluluskan daripada komponen induk:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

Dalam komponen induk, fungsi __hasMultipleSelected mengembalikan sama ada benar atau salah, bergantung pada keadaan aplikasi. Anda kemudiannya boleh menggunakan kod berikut dalam kaedah pemaparan komponen TopicNav untuk menggunakan atribut kelas secara bersyarat:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
  <!-- Button group content -->
</div>

Walau bagaimanapun, dalam kod yang anda berikan, pendakap kerinting tidak diletakkan dengan betul dalam rentetan, yang menghalang yang betul penilaian ungkapan bersyarat. Sintaks yang betul hendaklah:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
  <!-- Button group content -->
</div>

Dengan meletakkan pendakap kerinting di luar rentetan, anda memastikan bahawa ungkapan (this.props.showBulkActions ? 'show' : 'hidden') dinilai dahulu dan rentetan yang terhasil kemudiannya digabungkan dengan atribut kelas yang tinggal. Ini akan berfungsi seperti yang diharapkan, menunjukkan atau menyembunyikan kumpulan butang secara bersyarat berdasarkan nilai this.props.showBulkActions.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Atribut Kelas Secara Bersyarat dalam React untuk Kawalan UI Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!