Условното изобразяване се отнася до промяна на поведението на приложение в зависимост от неговото състояние. Например, можете да промените поздравителното съобщение на вашето приложение React на тъмно през нощта. По този начин имате различно съобщение на дисплея в зависимост от времето на деня.

Условното изобразяване ви позволява да изобразявате различни компоненти или елементи на React, ако е изпълнено условие. В този урок ще научите за различните начини, по които можете да използвате условно изобразяване в приложенията React.js.

Начини, по които можете да внедрите условно изобразяване

За да следвате тези примери, трябва да имате основно разбиране за това как работи React. Ако имате затруднения в този случай, не се притеснявайте - имаме полезен ръководство за начинаещи за React.js.

Използване на условни изрази

Подобно на JavaScript, можете да използвате условни изрази като if…else, за да създавате елементи, когато са изпълнени определени условия.

Например, можете да покажете определен елемент в

ако блокирайте, когато е изпълнено условие и показвайте различно в друго блокирайте, ако условието не е изпълнено.

Помислете за следния пример, който или показва бутон за влизане или излизане в зависимост от състоянието на влизане на потребителя.

функция Табло за управление (реквизит) {
 const { isLoggedIn } = props
 if (isLoggedIn){
 връщане Излез от профила си
 } друго{
 връщане Влизам
 }
}

Тази функция изобразява различен бутон в зависимост от isLoggedIn стойност, предадена като реквизит.

Свързани: Как да използвате реквизити в ReactJS

Като алтернатива можете да използвате тернарния оператор. Тернарният оператор приема условие, последвано от кода, за да се изпълни, ако условието е истина последвано от кода за изпълнение, ако условието е фалшиво.

Пренапишете горната функция като:

функция Табло за управление (реквизит) {
 const { isLoggedIn } = props
 връщане (
 <>
 {isLogged?Излез от профила си:Влизам)
 )
}

Тернарният оператор прави функцията по-чиста и по-лесна за четене в сравнение с ако...друго изявление.

Деклариране на променливи на елементи

Променливите на елемента са променливи, които могат да държат JSX елементи и да бъдат изобразени, когато е необходимо в приложение React.

Можете да използвате променливи на елемента, за да изобразите само определена част от компонента, когато приложението ви отговаря на определеното условие.

Например, ако искате да изобразите само бутон за влизане, когато потребителят не е влязъл, и бутон за излизане само когато е влязъл, можете да използвате променливи на елемента.

функция LoginBtn (реквизит) {
 връщане (

 Влизам

 );
}
функция ИзходBtn (реквизит) {
 връщане (

 Излез от профила си

 );
}
функция Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (вярно)
 }
 const handleИзход = () => {
 setLoggedIn (false)
 }
 бутон за пускане;
 if (влезли) {
 бутон = 
 } друго {
 бутон = 
 }
 връщане (
 <>
 {Вписан}
 )
}

В горния код първо създадете компонентите на бутона за влизане и излизане, след което дефинирайте компонент за изобразяване на всеки от тях при различни условия.

В този компонент използвайте куката за състояние на React, за да следите кога потребителят е влязъл.

Свързани: Овладейте уменията си за реагиране, като научите тези допълнителни кукички

Сега, в зависимост от състоянието или изобразете или съставна част.

Ако потребителят не е влязъл, изобразете компонент иначе рендер thд съставна част. Двете функции на манипулатора променят състоянието на влизане при щракване върху съответния бутон.

Използване на логически оператори

Можете да използвате логически && оператор за условно изобразяване на елемент. Тук елемент се изобразява само ако условието е вярно, в противен случай се игнорира.

Ако искате да уведомите потребител за броя на известията, които има само когато има едно или повече известия, можете да използвате следното.

функция ShowNotifications (реквизит) {
 const { известия } = реквизит
 връщане (
 <>
 {notifications.length > 0 &&

 Имате {notifications.length} известия.


 }
 )
}

След това, за да изобразите елемент, ако логическият израз && се оценява на фалшива стойност, свържете логическия || оператор.

Следната функция показва съобщението „Нямате известия“, ако не са предадени известия като реквизити.

функция ShowNotifications (реквизит) {
 const { известия } = реквизит
 връщане (
 <>
 {notifications.length > 0 &&

 Имате {notifications.length} известия.
 || 
Нямате известия

 }
 )
}

Предотвратете изобразяване на компонент

За да скриете компонент, въпреки че е изобразен от друг компонент, върнете null вместо неговия изход.

Помислете за следния компонент, който изобразява предупредителен бутон само ако предупредително съобщение е предадено като реквизит.

функция Предупреждение (реквизит) {
 const {warningMessage} = props
 if (!warningMessage) {
 връщане на нула
 }
 връщане (
 <>
Внимание
 )
}

Сега, ако предадете „warningMessage“ на компонент, ще бъде изобразен бутон за предупреждение. Въпреки това, ако не го направите, ще върне null и бутонът няма да се покаже.

 // предупредителният бутон се изобразява
 // бутонът за предупреждение не се изобразява

Примери за условно изобразяване в приложения React в реалния живот

Използвайте условно изобразяване, за да изпълнявате различни задачи във вашето приложение. Някои от тях включват изобразяване на API данни само когато са налични и показване на съобщение за грешка само когато съществува грешка.

Данни за изобразяване, извлечени от API в React

Извличането на данни от API може да отнеме известно време. Затова първо проверете дали е наличен, преди да го използвате във вашето приложение, в противен случай React ще изведе грешка, ако не е налична.

Следната функция показва как можете условно да изобразите данни, върнати от API.

функция FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Извличане на данни от API с помощта на Axios
 const fetchData = async () => {
 const отговор = чакам axios.get (apiURL)
 // Актуализиране на състоянието с данните
 setData (response.data) 
 }
 връщане (
 <>
Астрономическа снимка на деня

 {
 данни && 
{data.title}

{data.explanation}

 }
 )
}

В горната функция извлечете данните от API на NASA Apod с помощта на Axios. Когато API върне отговор, актуализирайте състоянието и използвайте логически оператор &&, за да изобразите данните само когато са налични.

Свързани: Как да консумирате API в React, използвайки Fetch и Axios

Показване на съобщения за грешка

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

Например, ако създавате формуляр и искате да покажете съобщение за грешка, ако потребител е въвел грешен имейл формат, актуализирайте състоянието със съобщението за грешка и използвайте оператор if, за да го изобразите.

функция showError() {
 const [грешка, setError] = useState (null)
 връщане (
 <>
 {
 ако (грешка) {
Възникна грешка: {error}

 }
 }
 )
}

Избор на какво да използвате във вашето приложение React

В този урок научихте за няколко начина, които могат условно да изобразяват JSX елементи.

Всички обсъждани методи дават едни и същи резултати. Направете избор какво да използвате в зависимост от случая на употреба и нивото на четливост, което искате да постигнете.

7 най-добри безплатни урока за изучаване на реакция и създаване на уеб приложения

Безплатните курсове рядко са толкова изчерпателни и полезни – но ние открихме няколко React курса, които са отлични и ще ви помогнат да започнете с правилния крак.

Прочетете Следващото

За автора