Cara yang benar untuk menangani gaya bersyarat di React

Saya sedang melakukan React sekarang dan saya bertanya-tanya apakah ada cara yang "benar" untuk melakukan gaya bersyarat. Dalam tutorial yang mereka gunakan

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

Saya lebih suka tidak menggunakan gaya sebaris jadi saya ingin menggunakan kelas untuk mengontrol gaya bersyarat. Bagaimana seseorang mendekati ini dengan cara berpikir React? Atau haruskah saya menggunakan cara gaya sebaris ini?

Jika Anda lebih suka menggunakan nama kelas, tentu saja gunakan nama kelas.

className={completed ? 'text-strike' : null}

Anda juga dapat menemukan classnames paket membantu. Dengannya, kode Anda akan terlihat seperti ini:

className={classNames({ 'text-strike': completed })}

Tidak ada cara yang "benar" untuk melakukan gaya bersyarat. Lakukan apa pun yang terbaik untuk Anda. Untuk diri saya sendiri, saya lebih suka menghindari gaya sebaris dan menggunakan kelas dengan cara yang baru saja dijelaskan.

POSTSCRIPT [06-AGUSTUS-2019]

Meskipun tetap benar bahwa React tidak berpandangan sama tentang styling, hari ini saya akan merekomendasikan solusi CSS-in-JS; yaitu komponen gaya atau emosi . Jika Anda baru mengenal React, gunakan kelas CSS atau gaya sebaris untuk memulai. Tetapi setelah Anda merasa nyaman dengan React, saya sarankan untuk mengadopsi salah satu perpustakaan ini. Saya menggunakannya di setiap proyek.

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

Lihat kode di atas. Itu akan berhasil.

Jika Anda perlu menerapkan gaya sebaris secara bersyarat (menerapkan semua atau tidak sama sekali), notasi ini juga berfungsi:

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

Jika 'someCondition' tidak terpenuhi maka Anda meneruskan objek kosong.

Pertama, saya setuju dengan Anda sebagai masalah gaya - saya juga akan (dan juga) menerapkan kelas secara kondisional daripada gaya sebaris. Tapi Anda bisa menggunakan teknik yang sama:

<div className={{completed ? "completed" : ""}}></div>

Untuk kumpulan status yang lebih kompleks, kumpulkan array kelas dan terapkan:

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

alih-alih ini:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

Anda dapat mencoba yang berikut ini menggunakan korsleting:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

bit informasi kunci dari tautan:

Hubung singkat berarti bahwa dalam JavaScript saat kita mengevaluasi ekspresi AND (&&), jika operan pertama salah, JavaScript akan mengalami korsleting dan bahkan tidak melihat operan kedua.

Perlu dicatat bahwa ini akan mengembalikan false jika operan pertama salah, jadi mungkin harus mempertimbangkan bagaimana hal ini akan memengaruhi gaya Anda.

Solusi lain mungkin lebih merupakan praktik terbaik, tetapi menurut saya akan bermanfaat untuk dibagikan.

Cara lain, menggunakan gaya sebaris dan operator sebaran

style={{
  ...completed ? { textDecoration: completed } : {}
}}

Cara tersebut berguna dalam beberapa situasi di mana Anda ingin menambahkan sekumpulan properti pada saat yang sama berdasarkan kondisi.

Saya menemukan pertanyaan ini ketika mencoba menjawab pertanyaan yang sama. Pendekatan McCrohan dengan class array & join solid.

Melalui pengalaman saya, saya telah bekerja dengan banyak kode ruby ​​lawas yang diubah menjadi React dan saat kami membangun komponen, saya mendapati diri saya menjangkau kelas css dan gaya sebaris yang ada.

cuplikan contoh di dalam sebuah komponen:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

Sekali lagi, saya menemukan diri saya menjangkau kode css lama, "mengemasnya" dengan komponen dan melanjutkan.

Jadi, saya benar-benar merasa agak tidak tahu apa yang "terbaik" karena label itu akan sangat bervariasi tergantung pada proyek Anda.

Cara terbaik untuk menangani penggayaan adalah dengan menggunakan kelas dengan set properti css.

contoh:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

Anda bisa menggunakan sesuatu seperti ini.

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

Atau yang lain, Anda dapat menggunakan classnames paket NPM untuk membuat dinamis dan className bersyarat alat peraga sederhana untuk bekerja dengan (terutama lebih daripada manipulasi string bersyarat).

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'