Корректный способ обработать условное моделирование в Реагирует

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

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

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

62
задан 3 March 2016 в 06:13

5 ответов

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

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

можно также найти эти имена классов пакет полезный. С ним Ваш код был бы похож на это:

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

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

POSTSCRIPT [06-AUG-2019]

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

50
ответ дан 31 October 2019 в 13:53
 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

Контроль вышеупомянутый код. Это добьется цели.

64
ответ дан 31 October 2019 в 13:53

Я столкнулся с этим вопросом при попытке ответить на тот же вопрос. Подход McCrohan с классами выстраивает & соединение твердо.

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

отрывок в качестве примера в компоненте:

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

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

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

1
ответ дан 31 October 2019 в 13:53

лучший способ обработать моделирование при помощи классов с набором свойств CSS.

пример:

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

getColor(){
let class = "badge m2";
class + = this.state.count===0?"wrarning":danger
return class
}
0
ответ дан 31 October 2019 в 13:53

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

<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>;
6
ответ дан 31 October 2019 в 13:53

Другие вопросы по тегам:

Похожие вопросы: