Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam React?

Menggunakan Atribut Kelas Secara Bersyarat dalam React

Apabila membangunkan aplikasi React, anda mungkin menghadapi senario di mana anda perlu menunjukkan atau menyembunyikan elemen secara dinamik berdasarkan prop yang diluluskan daripada komponen induk. Satu isu biasa yang timbul ialah aplikasi bersyarat bagi atribut kelas.

Satu pendekatan untuk perkara ini ialah menggunakan sintaks pemaparan bersyarat, di mana anda membungkus elemen dalam kurungan kerinting dan menyediakan ungkapan logik yang menentukan sama ada untuk memaparkannya. Walau bagaimanapun, apabila berurusan dengan atribut kelas, pendekatan berbeza diperlukan.

Dalam contoh yang diberikan, matlamatnya adalah untuk memaparkan kumpulan butang secara bersyarat berdasarkan prop showBulkActions. Kod cuba untuk memaparkan kumpulan butang seperti ini:

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

Walau bagaimanapun, tiada apa yang berlaku kerana pendakap kerinting disertakan dalam rentetan. Untuk membetulkannya, pendakap kerinting perlu diletakkan di luar rentetan:

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

Ini memastikan keadaan dinilai sebelum rentetan diberikan kepada atribut className. Selain itu, pastikan terdapat ruang sebelum ungkapan bersyarat untuk mengelakkan penggabungan kelas yang tidak diingini.

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