Bagaimana untuk Melaksanakan Rendering Kelas Bersyarat dengan Betul dalam React?

Rendering Bersyarat Atribut Kelas dalam React

Dalam React, menunjukkan atau menyembunyikan elemen secara bersyarat berdasarkan prop yang diterima daripada komponen induk adalah perkara biasa kes guna. Dalam coretan kod yang diberikan, pengarang bertujuan untuk menyembunyikan atau menunjukkan kumpulan butang berdasarkan nilai prop showBulkActions.

Isunya ialah pendakap kerinting { } yang digunakan untuk pemaparan bersyarat disertakan dalam rentetan untuk atribut className. Ini mentafsirkan keseluruhan rentetan sebagai nilai statik, menyebabkan tiada pemaparan bersyarat sebenar.

Penyelesaian:

Untuk menggunakan atribut kelas secara bersyarat berdasarkan prop, pendakap kerinting mesti diletakkan di luar rentetan, melampirkan keadaan logik dan menentukan nama kelas. Kod berikut menggambarkan pendekatan yang betul:

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

Penjelasan:

• Nama kelas kini disertakan dalam pendakap kerinting.
• keadaan logik (this.props.showBulkActions ? 'show' : 'hidden') menilai untuk 'show' jika this.props.showBulkActions adalah benar dan 'tersembunyi' jika palsu.
• Ruang selepas "pull-right" memastikan bahawa "pull-rightshow" tidak akan digunakan secara tidak sengaja sebagai kelas.
• Kurungan adalah penting untuk penilaian yang betul bagi ungkapan ternary.

Dengan mengikuti ini pembetulan, kumpulan butang kini harus muncul atau hilang secara bersyarat berdasarkan prop showBulkActions komponen induk.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Rendering Kelas Bersyarat dengan Betul dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!