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

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

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

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

источник

2016-03-03 davidhtien

Думаю, вы можете смутить 'redux' и' реагировать'. Redux не имеет никакого отношения к стилю. – rossipedia

Я думаю, что ваше предпочтение - это место для документов, но чрезмерно усердно для приложений, в которых взаимозаменяемость разметки не важна. некоторые крупные веб-приложения фактически избавляются от классов и используют только встроенный стиль, который более предсказуем и легче рассуждать, чем то, что из 5 применяемых правил делает текст полужирным. когда атрибуты динамичны, вы не сэкономите большую пропускную способность, как в случае с повторяющимися документами. семантика приложения (разметка источника просмотра) не так важна ... – dandavis

@rossipedia ах да спасибо, перепутал, смотрел учебник по редукту, когда думал об этом, спасибо! – davidhtien

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

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

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

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

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

источник

2016-03-03 03:21:12

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

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

источник

2016-03-03 03:20:20

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

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

источник

2017-12-16 09:57:06

В точности искал что-то вроде этого. Условное встроенное моделирование, спасибо. –

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

ответ

Смежные вопросы