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