Лучшие методы в JSX
Вот два лучших способа условного рендеринга компонентов в JSX React без использования уродливого «если еще».
Если у вас есть условие «если еще», используйте тернарный оператор. У вас есть приложение Cookbook, и вы хотите отобразить ‹Еда /›, если пользователь ищет рецепты еды, или ‹Напитки /›, если пользователь ищет рецепты напитков.
Обратите внимание, что isFood может быть состоянием локального компонента или свойством.
Если у вас есть If, но нет else, используйте оператор &&. Например, вы хотите отобразить любимые рецепты пользователя, ЕСЛИ они у него есть.
Где избранное происходит либо от местного штата, либо от реквизита.
&& — это логическое «и» в JavaScript, и оно будет проверять каждое выражение по порядку.
Таким образом, в нашем случае он проверит, есть ли у пользователя какие-либо избранные, и если это оценивается как True, он выполнит то, что следует за этим, а именно рендеринг ‹FavoriteRecipes/›. Для рендеринга ‹FavoriteRecipes /› оператор && всегда будет оцениваться как True, пока компонент присутствует.
