
Содержание статьи
Донавон Вест

Есть несколько способов, которыми ваш компонент React может решить, что рендерит. Можно воспользоваться традиционным if
заявление или switch
заявление. В этой статье мы рассмотрим несколько альтернатив. Но имейте в виду, что некоторые приходят со своими проблемами, если вы не будете осторожны.
Тернарный против if/else
Скажем, у нас есть компонент, которому передается a name
опора Если строка не пуста, мы выводим приветствие. В противном случае мы сообщаем пользователю, что ему нужно войти.
Вот функциональный компонент без сохранения состояния (SFC), который делает это.
const MyComponent = ({ name }) => { if (name) { return ( <div className="hello"> Hello {name} </div> ); } return ( <div className="hello"> Please sign in </div> );};
Достаточно просто. Но мы можем улучшить. Вот тот же компонент, написанный с помощью a условный тернарный оператор.
const MyComponent = ({ name }) => ( <div className="hello"> {name ? `Hello ${name}` : 'Please sign in'} </div>);
Обратите внимание, насколько этот сжатый код по сравнению с примером выше.
Несколько вещей, на которые следует обратить внимание. Поскольку мы используем единственную форму оператора функции стрелки, the return
утверждение подразумевается. Кроме того, использование троичного кода позволило нам ВЫСУШИТЬ дубликат. <div className="hell
o»> разметка. ?
Тернарное против логического I
Как видите, тройчатые прекрасно подходят для if/else
условия. Но как насчет простого if
условия?
Давайте рассмотрим другой пример. Если isPro
(логическое значение) есть true
, мы должны показать эмодзи-трофей. Мы также должны отразить количество звезд (если не нуль). Мы могли бы это сделать так.
const MyComponent = ({ name, isPro, stars}) => ( <div className="hello"> <div> Hello {name} {isPro ? '?' : null} </div> {stars ? ( <div> Stars:{'⭐️'.repeat(stars)} </div> ) : null} </div>);
Но заметьте, что возвращаются условия «другое». null
. Это потому, что троичный блок ожидает условия else.
Для простого if
условий, мы могли бы использовать что-то более подходящее: логический оператор I. Вот тот же код, написанный с помощью логического И.И.
const MyComponent = ({ name, isPro, stars}) => ( <div className="hello"> <div> Hello {name} {isPro && '?'} </div> {stars && ( <div> Stars:{'⭐️'.repeat(stars)} </div> )} </div>);
Не слишком разные, но обратите внимание, как мы их устранили : null
(т.е. условие else) в конце каждого троичного элемента. Все должно отражаться так же, как и раньше.
Привет! Что дает Джон? Есть 0
когда ничего не должно быть воспроизведено. Это то, что я имел в виду выше. Вот поэтому.
Согласно MDN, логическое И (т.е. &&
):
expr1 && expr2
Возвращение
expr1
если его можно превратить вfalse
; иначе возвращаетсяexpr2
. Таким образом, при использовании с логическими значениями,&&
возвращаетсяtrue
если оба операнда истинны; иначе возвращаетсяfalse
.
Ладно, прежде чем начать выдергивать волосы, позволь мне разобраться.
В нашем случае expr1
является переменной stars
какое значение 0
. Потому что ноль фальшивый, 0
возвращается и воспроизводится. Видите, это было не так уж плохо.
Я бы написал это просто.
Если
expr1
falsey, возвращаетexpr1
иначе возвращаетexpr2
.
Итак, когда используем логическое и с нелогичными значениями, мы должны сделать так, чтобы значение falsey возвращало то, что React не воспроизведет. Скажем, как значение false
.
Есть несколько способов, которыми мы можем это сделать. Давайте вместо этого попробуем это.
{!!stars && ( <div> {'⭐️'.repeat(stars)} </div>)}
Обратите внимание на оператор двойного удара (т.е. !!
) перед stars
. (Ну, на самом деле нет «оператора двойного удара». Мы просто используем оператора удара дважды.)
Первый оператор взрыва приведет к значению stars
в логическое значение, а затем выполните операцию NOT. Если stars
есть 0
потом !stars
будет производить true
.
Затем мы выполняем вторую операцию НЕ, поэтому if stars
равно 0, !!stars
производил бы false
. Именно то, что мы хотим.
Если вы не фанат !!
вы также можете принудительно указать такое логическое значение (что мне кажется немного многословным).
{Boolean(stars) && (
Или просто дайте компаратор, который приводит к логическому значению (которые могут сказать, что даже более семантическим).
{stars > 0 && (
Слово на струнах
Пустые строчные значения имеют ту же проблему, что и числа. Но поскольку воспроизведенная пустая строка невидима, это не проблема, с которой вам, вероятно, придется иметь дело или даже заметить. Однако, если вы перфекционист и не хотите иметь пустую строку в своем DOM, вам следует принять подобные меры предосторожности, как мы делали для чисел выше.
Другое решение
Возможным решением, масштабируемым к другим переменным в будущем, было бы создать отдельный shouldRenderStars
переменная. Тогда вы имеете дело с логическими значениями в своем И.
const shouldRenderStars = stars > 0;
return ( <div> {shouldRenderStars && ( <div> {'⭐️'.repeat(stars)} </div> )} </div>);
Тогда, если в будущем бизнес-правило будет таким, что вам нужно будет войти в систему, иметь собаку и пить светлое пиво, вы можете изменить shouldRenderStars
исчисляется, и возвращаемое останется неизменным. Вы также можете разместить эту логику где угодно, где ее можно проверить, и сохранить явную визуализацию.
const shouldRenderStars = stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;
return ( <div> {shouldRenderStars && ( <div> {'⭐️'.repeat(stars)} </div> )} </div>);
Вывод
Я считаю, что вы должны лучше использовать язык. А для JavaScript это означает использование условных тернарных операторов для if/else
условия и логические операторы И для простых if
условия.
Хотя мы могли бы просто вернуться к нашему безопасному удобному месту, где мы всюду используем тройной оператор, теперь вы владеете знаниями и силой, чтобы идти вперед и преуспевать.
Я тоже пишу для инженерного блога American Express. Просмотрите другие мои работы и работы моих талантливых коллег на AmericanExpress.io. Вы также можете следить за мной в Twitter.