Правильный способ обработки условного стиля в React

Я сейчас немного занимаюсь React, и мне было интересно, есть ли «правильный» способ создания условных стилей. В учебнике они используют

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

Я предпочитаю не использовать встроенные стили, поэтому вместо этого хочу использовать класс для управления условным стилем. Как можно подойти к этому с точки зрения мышления React? Или я должен просто использовать этот способ встроенного стиля?

Если вы предпочитаете использовать имя класса, обязательно используйте имя класса.

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

Вы также можете найти пакет classnames полезным. С ним ваш код будет выглядеть так:

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, когда мы оцениваем выражение И (&&), если первый операнд ложен, JavaScript выполняет короткое замыкание и даже не смотрит на второй операнд.

Стоит отметить, что это вернет false, если первый операнд - false, поэтому, возможно, придется подумать, как это повлияет на ваш стиль.

Другие решения могут быть более передовыми, но подумал, что стоит поделиться.

Другой способ, используя встроенный стиль и оператор распространения

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

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

Я столкнулся с этим вопросом, пытаясь ответить на тот же вопрос. Подход МакКрохана к массиву классов и объединению является надежным.

Благодаря своему опыту я работал с большим количеством устаревшего кода Ruby, который конвертируется в 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 classnames , чтобы упростить работу с динамическими и условными props 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'