Cara Menggunakan Atribut Kelas Secara Bersyarat dalam React: Mengapa togol keterlihatan kumpulan butang saya tidak berfungsi?

Menggunakan Atribut Kelas Secara Bersyarat dalam React

Secara konsep, pemaparan elemen secara bersyarat ialah kes penggunaan biasa dalam React. Walau bagaimanapun, persoalan timbul apabila mempertimbangkan atribut kelas. Artikel ini meneroka cara menggunakan atribut kelas secara bersyarat, menggunakan contoh praktikal:

Soalan:

Seorang pengguna cuba menogol keterlihatan kumpulan butang berdasarkan nilai boolean yang diluluskan daripada komponen induk. Walau bagaimanapun, atribut kelas tidak dinilai dengan betul.

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

Jawapan:

Isunya terletak pada peletakan pendakap kerinting yang mengelilingi ungkapan. Daripada berada di dalam rentetan, ia sepatutnya berada di luar, bersama-sama dengan kurungan, seperti berikut:

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

Dengan meletakkan pendakap kerinting di luar rentetan, ungkapan itu dinilai sebagai kod JavaScript dan bukannya rentetan statik . Ini membolehkan kelas yang betul digunakan berdasarkan nilai boolean this.props.showBulkActions.

Selain itu, ruang ditambah selepas "tarik-kanan" untuk memastikan atribut kelas digunakan dengan betul. Tanpa ruang, risiko mencipta kelas yang tidak sah, seperti "pertunjukan tarik-kanan" dan bukannya "pertunjukan tarik-kanan".

Atas ialah kandungan terperinci Cara Menggunakan Atribut Kelas Secara Bersyarat dalam React: Mengapa togol keterlihatan kumpulan butang saya tidak berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!