Условный рендеринг в реакции с использованием троиков и логических и

Автор оригинала: FreeCodeCamp Community Member.

Донавоном Уэстом

Существует несколько способов того, что ваш реактивный компонент может решить, что рендерировать. Вы можете использовать традиционный Если заявление или Переключатель утверждение. В этой статье мы рассмотрим несколько альтернатив. Но быть предупрежденным, что некоторые приходят со своими готы, если вы не осторожны.

Тернар против, если бы/else

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

Вот компонент функции без гражданства (SFC), который делает только что это.

const MyComponent = ({ name }) => {  if (name) {    return (      
        Hello {name}      
    );  }  return (    
      Please sign in    
  );};

Довольно просто. Но мы можем сделать лучше. Вот тот же компонент, написанный с помощью Условный тройной оператор Отказ

const MyComponent = ({ name }) => (  
    {name ? `Hello ${name}` : 'Please sign in'}  
);

Обратите внимание, насколько это кратко этот код сравнивается с примером выше.

Несколько вещей, чтобы отметить. Потому что мы используем одну форму оператора функции стрелки, Возвращение утверждение подразумевается. Кроме того, использование тройника позволило нам высыхать дубликат

Тройное против логика и

Как видите, троины прекрасны для Если/else условия. Но как насчет простых Если условия?

Давайте посмотрим на другой пример. Если ISPRO (логический) это правда Мы должны показать трофей эмоджи. Мы также должны сделать количество звезд (если не ноль). Мы могли бы пойти по этому поводу.

const MyComponent = ({ name, isPro, stars}) => (  
    
      Hello {name}      {isPro ? '?' : null}    
    {stars ? (      
        Stars:{'⭐️'.repeat(stars)}      
    ) : null}  
); 

Но обратите внимание на «другие» условия возврата null Отказ Это потому, что тройное время ожидает иначе.

Для простого Если Условия, мы могли бы использовать что-то немного больше подходящего: логично и оператор Отказ Вот тот же код, написанный с помощью логического и.

const MyComponent = ({ name, isPro, stars}) => (  
    
      Hello {name}      {isPro && '?'}    
    {stars && (      
        Stars:{'⭐️'.repeat(stars)}      
    )}  
); 

Не слишком отличается, но обратите внимание, как мы устранили : null (то есть состояние) в конце каждого тройного. Все должно сделать так же, как и раньше.

Привет! Что дает с Джоном? Есть 0 когда ничего не должно быть оказано. Это Гоща, что я имел в виду выше. Вот почему.

Согласно MDN логично и (то есть && ):

Хорошо, прежде чем начать вытащить волосы, позвольте мне сломать его для вас.

В нашем случае expr1 Переменная звезды , который имеет значение 0 Отказ Потому что ноль ложный, 0 возвращается и оказывается. Видишь, это было не так уж плохо.

Я бы написал это просто.

Итак, при использовании логического и с нерублевыми значениями, мы должны сделать значение FALASEY возвращать то, что реагирует не представляет собой. Скажи, как ценность ложь Отказ

Есть несколько способов того, что мы можем сделать это. Давайте попробуем это вместо этого.

{!!stars && (  
    {'⭐️'.repeat(stars)}  
)}

Обратите внимание на оператор двойного взрыва (I.E. !! ) перед звезды Отказ (Ну, на самом деле нет «оператора двойного взрыва». Мы просто используем оператор взрыва в два раза.)

Первый оператор взрыва принесет ценность звезды в логию, а затем выполнить не операцию. Если звезды это 0 Тогда ! Звезды будет производить правда Отказ

Затем мы выполняем секунду не операцию, так что если звезды 0, !! Звезды будет производить ложь Отказ Именно то, что мы хотим.

Если вы не поклонник ! , вы также можете заставить логию, как это (который я нахожу немного слоя).

{Boolean(stars) && (

Или просто дайте компаратору, что приводит к логическому значению (что некоторые могут сказать, еще более семантически).

{stars > 0 && (

Слово на струнах

Пустые строковые значения страдают той же проблемой, что и цифры. Но поскольку отображаемая пустая строка невидима, это не проблема, с которой вам, вероятно, придется иметь дело или даже заметить. Однако, если вы являетесь перфекционистом и не хотите, чтобы пустая строка на вашем доме вы должны принять подобные меры предосторожности, поскольку мы сделали для цифр выше.

Другое решение

Возможное решение и то, что масштабируется на другие переменные в будущем, было бы создание отдельной Тренендстары Переменная. Тогда вы имеете дело с логическими ценностями в вашем логическом и.

const shouldRenderStars = stars > 0;

return (  
    {shouldRenderStars && (      
        {'⭐️'.repeat(stars)}      
    )}  
);

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

const shouldRenderStars =   stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;

return (  
    {shouldRenderStars && (      
        {'⭐️'.repeat(stars)}      
    )}  
);

Вывод

Я считаю, что вы должны наилучшим образом использовать язык. А для JavaScript это означает использование условных тройных операторов для Если/else Условия и логические и операторы для простых Если условия.

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

Я также пишу для American Express Engineering Blog. Проверьте мои другие произведения и произведения моих талантливых сотрудников в AmericanExpress.io Отказ Вы также можете Подпишись на меня в Твиттере .