Saya ingin memperlihatkan dan menyembunyikan grup tombol ini secara kondisional tergantung pada apa yang diteruskan dari komponen induk yang terlihat seperti ini:
<TopicNav showBulkActions={this.__hasMultipleSelected} />
....
__hasMultipleSelected: function() {
return false; //return true or false depending on data
}
....
var TopicNav = React.createClass({
render: function() {
return (
<div className="row">
<div className="col-lg-6">
<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Bulk Actions <span className="caret"></span>
</button>
<ul className="dropdown-menu" role="menu">
<li><a href="#">Merge into New Session</a></li>
<li><a href="#">Add to Existing Session</a></li>
<li className="divider"></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
);
}
});
Namun tidak ada yang terjadi, dengan {this.props.showBulkActions? 'show': 'hidden'}. Apakah saya melakukan sesuatu yang salah di sini?
Jawaban:
Kurung kurawal berada di dalam string, sehingga dievaluasi sebagai string. Mereka harus berada di luar, jadi ini harus bekerja:
Perhatikan spasi setelah "tarik-kanan". Anda tidak ingin secara tidak sengaja memberikan kelas "pull-rightshow" alih-alih "pull-right show". Juga tanda kurung harus ada di sana.
sumber
classnames
mungkin tidak sesuai. Jika Anda berada dalamrender
fungsi Anda dan Anda memilikimap
, Anda mungkin hanya tahu apakah Anda ingin menambahkan kelas pada saat Anda merendernya, jadi jawaban ini cukup berguna untuk itu.this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')
. Tidak elegan tapi berhasil.Seperti orang lain berkomentar, utilitas classnames adalah pendekatan yang saat ini direkomendasikan untuk menangani nama kelas CSS bersyarat di ReactJs.
Dalam kasus Anda, solusinya akan terlihat seperti:
...
Sebagai catatan tambahan, saya menyarankan Anda untuk mencoba menghindari penggunaan keduanya
show
danhidden
kelas, sehingga kodenya bisa lebih sederhana. Kemungkinan besar Anda tidak perlu mengatur kelas untuk sesuatu yang akan ditampilkan secara default.sumber
classNames
saat ini?Jika Anda menggunakan transpiler (seperti Babel atau Traceur), Anda dapat menggunakan " string template " ES6 yang baru .
Inilah jawaban dari @ spitfire109, yang dimodifikasi sesuai:
Pendekatan ini memungkinkan Anda untuk melakukan hal-hal yang rapi seperti itu, memberikan salah satu
s-is-shown
ataus-is-hidden
:sumber
s-is-shown
ataus-is-hidden
dalam basis kode, mereka tidak akan menemukan kode ini.Anda dapat menggunakan String literal di sini
sumber
Mengeluarkan jawaban baik @ spitfire109, orang dapat melakukan sesuatu seperti ini:
dan kemudian dalam fungsi render:
membuat jsx singkat
sumber
Atau gunakan npm classnames . Ini sangat mudah dan berguna terutama untuk membangun daftar kelas
sumber
Jika Anda hanya perlu satu nama kelas opsional:
sumber
false
kelas ketika kondisi gagal.Anda dapat menggunakan array ES6 alih-alih nama kelas. Jawabannya didasarkan pada artikel Dr. Axel Rauschmayer: Secara kondisional menambahkan entri di dalam Array dan objek literal .
sumber
2019:
Bereaksi adalah danau banyak utilitas. Tetapi Anda tidak membutuhkan
npm
paket apa pun untuk itu. buat saja suatu fungsiclassnames
dan panggil ketika Anda membutuhkannya;atau
contoh
Hanya Untuk Inspirasi
mendeklarasikan elemen pembantu dan menggunakannya
toggle
metode(DOMTokenList)classList.toggle(class,condition)
contoh:
sumber
Solusi yang lebih elegan, yang lebih baik untuk pemeliharaan dan keterbacaan:
sumber
Anda bisa menggunakan ini:
sumber
Ini akan bekerja untuk Anda
sumber
Anda dapat menggunakan paket npm ini . Ini menangani semuanya dan memiliki opsi untuk kelas statis dan dinamis berdasarkan variabel atau fungsi.
sumber
Berdasarkan nilai
this.props.showBulkActions
Anda dapat beralih kelas secara dinamis sebagai berikut.sumber
Saya ingin menambahkan bahwa Anda juga dapat menggunakan konten variabel sebagai bagian dari kelas
Konteksnya adalah obrolan antara bot dan pengguna, dan gaya berubah tergantung dari pengirim, ini adalah hasil browser:
sumber
Ini berguna ketika Anda memiliki lebih dari satu kelas untuk ditambahkan. Anda bisa bergabung dengan semua kelas dalam array dengan spasi.
sumber
Menggantikan:
dengan:
sumber
Referensi ke @split fire answer, kita dapat memperbaruinya dengan templat literals, yang lebih mudah dibaca, Untuk referensi Checkout javascript templat literal
sumber
Saya menemukan ini yang menjelaskan bagaimana melakukannya dengan ternary dan dengan Classnames Library
sumber