Правильний спосіб обробки умовного стилю в React

Зараз я роблю якийсь React, і мені було цікаво, чи існує "правильний" спосіб зробити умовний стиль. У підручнику, який вони використовують

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

Я вважаю за краще не використовувати вбудований стиль, тому я хочу замість цього використовувати клас для управління умовним стилем. Як можна підходити до цього в способі мислення React? Або я повинен просто використовувати цей вбудований спосіб стилізації?

Якщо ви віддаєте перевагу використовувати назву класу, неодмінно використовуйте назву класу.

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

Вам також може виявитися корисним пакет імен класів . З ним ваш код буде виглядати так:

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

Не існує "правильного" способу зробити умовний стиль. Робіть все, що вам найкраще підходить. Для себе я вважаю за краще уникати вбудованого стилю та використовувати класи у спосіб, щойно описаний.

ПОСТСКРИПТИП [06-СЕРПНЯ-2019]

Хоча це залишається вірним, що React не має погляду на стиль, сьогодні я рекомендую рішення CSS-in-JS; а саме стильові компоненти або емоції . Якщо ви новачок у React, для початку дотримуйтесь класів CSS або вбудованих стилів. Але як тільки Ви почуваєтесь комфортно з React, я рекомендую скористатися однією з цих бібліотек. Я використовую їх у кожному проекті.

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

Оформіть наведений вище код. Це зробить трюк.

Якщо вам потрібно умовно застосувати вбудовані стилі (застосувати все або нічого), тоді цей запис також працює:

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

Якщо 'someCondition' не виконується, ви передаєте порожній об'єкт.

По-перше, я погоджуюся з вами щодо стилю - я б також (і також роблю) умовно застосовував класи, а не вбудовані стилі. Але ви можете використовувати ту саму техніку:

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

Для більш складних наборів станів накопичуйте масив класів і застосовуйте їх:

var classes = [];

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

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

замість цього:

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

ви можете спробувати наступне, використовуючи коротке замикання:

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

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

ключовий біт інформації за посиланням:

Коротке замикання означає, що в JavaScript, коли ми обчислюємо вираз AND (&&), якщо перший операнд хибний, JavaScript буде замикатися і навіть не дивитись на другий операнд.

Варто зазначити, що це поверне значення false, якщо перший операнд хибний, тому, можливо, доведеться розглянути, як це вплине на ваш стиль.

Інші рішення могли б бути кращою практикою, але вважали, що варто поділитися ними.

Інший спосіб - використання вбудованого стилю та оператора розвороту

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

Цей спосіб буде корисним у деяких ситуаціях, коли ви хочете додати купу властивостей одночасно на основі умови.

Я зіткнувся з цим запитанням, намагаючись відповісти на це саме питання. Підхід Маккрохана до класу array & join є твердим.

Завдяки своєму досвіду я працював із великою кількістю застарілого рубінового коду, який перетворюється на React, і, будуючи компоненти, я виявляю, що я прагну як до існуючих класів css, так і до вбудованих стилів.

фрагмент прикладу всередині компонента:

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

Знову ж таки, я виявляю, що звертаюся до застарілого коду css, «упаковуючи» його в компонент і рухаюся далі.

Отже, я справді відчуваю, що це трохи в повітрі щодо того, що є "найкращим", оскільки цей ярлик буде сильно відрізнятися залежно від вашого проекту.

Найкращий спосіб обробки стилю - це використання класів із набором властивостей css.

приклад:

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

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

Ви можете використовувати щось подібне.

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>;
  }

Або ж ви можете використовувати пакет імен класів NPM, щоб зробити динамічні та умовні реквізити className простішими в роботі (особливо більше, ніж умовні маніпуляції з рядками).

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'