Сейчас я делаю некоторые действия, и мне было интересно, есть ли "правильный" способ сделать условный стиль. В учебнике они используют
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
Я предпочитаю не использовать встроенный стиль, поэтому я хочу вместо этого использовать класс для управления условным стилем. Как можно подойти к этому в мышлении Реакта? Или я должен просто использовать этот стиль встроенного стиля?
Если вы предпочитаете использовать имя класса, обязательно используйте имя класса.
className={completed ? 'text-strike' : null}
Вам также может быть полезен пакет <имя> класса. При этом ваш код будет выглядеть так:
className={classNames({ 'text-strike': completed })}
Не существует "правильного" способа выполнения условного моделирования. Делай все, что лучше для тебя. Для себя я предпочитаю избегать встроенного моделирования и использовать классы только что описанным способом.
POSTSCRIPT [06-AUG-2019]
Хотя до сих пор верно то, что React не знает стиля, в наши дни я бы порекомендовал решение CSS-in-JS; а именно, стилизованные компоненты или эмоция. Если вы новичок в React, для начала придерживайтесь CSS-классов или встроенных стилей. Но как только вы освоитесь с React, я рекомендую использовать одну из этих библиотек. Я использую их в каждом проекте.
<div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>
Оформить вышеуказанный код. Это сделает трюк.
Во-первых, я согласен с тобой в духе стиля - я бы (а также) условно применял классы, а не встроенные стили. Но вы можете использовать ту же технику:
<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>;
Я столкнулся с этим вопросом, пытаясь ответить на тот же вопрос. Подход МакКрохана с массивом классов и объединением является солидным.
По моему опыту, я работал с большим количеством унаследованного рубинового кода, который преобразуется в 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?"wrarning":danger
return class
}
вместо этого:
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, поэтому, возможно, придется подумать, как это повлияет на ваш стиль.
Другие решения могли бы быть лучшей практикой, но думали, что стоит поделиться.
Если вам необходимо условно применить встроенные стили (применить все или ничего), то эта запись также работает:
style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}
Если 'someCondition' не выполнено, вы передаете пустой объект.