Донавон Вест

Есть несколько способов, которыми ваш компонент 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="hello»> разметка. ?

Тернарное против логического 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.