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

Ответ 1

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

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

Вам также может быть полезен пакет <имя> класса. При этом ваш код будет выглядеть так:

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

Не существует "правильного" способа выполнения условного моделирования. Делай все, что лучше для тебя. Для себя я предпочитаю избегать встроенного моделирования и использовать классы только что описанным способом.

POSTSCRIPT [06-AUG-2019]

Хотя до сих пор верно то, что React не знает стиля, в наши дни я бы порекомендовал решение CSS-in-JS; а именно, стилизованные компоненты или эмоция. Если вы новичок в React, для начала придерживайтесь CSS-классов или встроенных стилей. Но как только вы освоитесь с React, я рекомендую использовать одну из этих библиотек. Я использую их в каждом проекте.

Ответ 2

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

Оформить вышеуказанный код. Это сделает трюк.

Ответ 3

Во-первых, я согласен с тобой в духе стиля - я бы (а также) условно применял классы, а не встроенные стили. Но вы можете использовать ту же технику:

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

Ответ 4

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

По моему опыту, я работал с большим количеством унаследованного рубинового кода, который преобразуется в React, и по мере того как мы строим компонент (-ы), я нахожусь в поиске как существующих классов CSS, так и встроенных стилей.

пример фрагмента внутри компонента:

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

Опять же, я обнаружил, что обращаюсь к устаревшему коду css, "упаковывая" его с компонентом и двигаясь дальше.

Таким образом, я действительно чувствую, что это немного в воздухе относительно того, что является "лучшим", поскольку этот ярлык будет сильно отличаться в зависимости от вашего проекта.

Ответ 5

лучший способ справиться с стилем - это использовать классы с набором свойств css.

пример:

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

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

Ответ 6

вместо этого:

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

вы можете попробовать следующее, используя короткое замыкание:

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

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

ключевой бит информации по ссылке:

Короткое замыкание означает, что в JavaScript, когда мы оцениваем выражение AND (& & amp;), если первый операнд имеет значение false, JavaScript будет закорачиваться и даже не смотреть на второй операнд.

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

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

Ответ 7

Если вам необходимо условно применить встроенные стили (применить все или ничего), то эта запись также работает:

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

Если 'someCondition' не выполнено, вы передаете пустой объект.