Условный рендеринг используется в React для управления тем, какие элементы или компоненты должны отображаться на основе определенных условий. Вместо того, чтобы рендерить все компоненты или элементы сразу, а затем использовать CSS для их скрытия и отображения, что, кстати, отнимает много времени и требует больше кода! Условный рендеринг играет решающую роль в создании динамических пользовательских интерфейсов (UI), которые адаптируются и изменяются в зависимости от пользовательского ввода, данных или состояния приложения. Это заставляет нас писать меньше и лаконичнее кода. В этой статье мы рассмотрим, как использовать условный рендеринг в React и его различные методы.
Понимание условного рендеринга
Как я уже говорил ранее, условный рендеринг позволяет отображать компоненты или элементы выборочно, в зависимости от определенных условий. Эти условия могут зависеть от таких факторов, как состояние приложения, пользовательский ввод, значения реквизита или любые другие переменные или выражения.
В React вы обычно используете условные операторы, такие как if else, троичные выражения, логические && и логические || операторы для достижения этой цели. Мы рассмотрим, как использовать каждый из них для условного рендеринга в реакции:
Если-иначе(если{}иначе{})
if-else — это условный оператор, который мы все слишком хорошо знаем, его можно использовать для условного рендеринга компонентов в реакции. Ниже приведен пример:
import React, {useState} from 'react';
function Login() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
}
export default Login;
//Output: Please sign in.
В приведенном выше примере компонент входа отображает разные заголовки в зависимости от значения состояния «isLoggedIn». Состояние «isLoggedIn» изначально установлено как false, что означает изначально тег заголовка 1 (‹h1›) с текстом «Пожалуйста, войдите». будет отображаться до тех пор, пока «isLoggedIn» не изменится или не изменится на true. Если мы изменим состояние «isLoggedIn» на true, теперь будет отображаться «Пожалуйста, войдите». Таким образом, это означает, что элемент или компонент внутри блока if всегда будет отображаться всякий раз, когда заданное условие (в данном случае состояние) истинно, тогда как элемент или компонент внутри блока else будет отображаться всякий раз, когда условие или состояние ложно.
Тернарный оператор (условие ? case1:case2 )
Тернарный оператор — это более простой способ выполнения условного рендеринга в React. Он обычно используется для простых условных операторов. Тернарный оператор называется так потому, что он принимает три операнда или аргумента. "состояние ? case1 : case2”в данном случаеусловие, case1 и case2 являются операнды или операторы. Всякий раз, когда условие оценивается как истинное, запускается или отображается «case1» или первое выражение (как в нашем случае), в противном случае запускается или отображается «case2» или второе выражение. Тернарный оператор иногда сбивает с толку, но давайте рассмотрим пример и поймем, как он используется с условным рендерингом:
import React, {useState} from 'react';
function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(true);
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
export default Greeting;
//Output: Welcome back!
В приведенном выше примере состояние isLoggedIn изначально имеет значение true, что означает, что отображается первый элемент (‹h1›Welcome back!‹/h1›). Всякий раз, когда установлено значение false, будет отображаться второй элемент (‹h1›Пожалуйста, войдите.‹/h1›). Я думаю, что это выглядит проще, чем использование if else!. Давайте посмотрим на пример кода, когда условие ложно:
import React, {useState} from 'react';
function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
export default Greeting;
//Output: Please sign in.
В приведенном выше примере состояние «isLoggedIn» изменено на false, поэтому отображается второй элемент внутри тернарного оператора, который в данном случае: «Пожалуйста, войдите».
Рекомендуется использовать квадратные скобки для заключения каждого выражения, элемента или компонента тернарного оператора, чтобы избежать путаницы, как показано в примере ниже:
import React, {useState} from 'react';
function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return isLoggedIn ? (<h1>Welcome back!</h1> ) : (<h1>Please sign in.</h1> );
}
export default Greeting;
//Output: Please sign in.
Заключение элементов, компонентов или выражений (в зависимости от случая) скобками помогает избежать путаницы, особенно когда выражений слишком много.
Логический оператор &&( && )
Логический оператор «&&» позволяет нам условно отображать компонент на основе простого условия. он отображается только тогда, когда данное условие истинно, в противном случае ничего не отображается, это означает, что если условие ложно, компонент вообще не будет отображаться. Обычно это используется всякий раз, когда вы хотите визуализировать компонент или элемент только тогда, когда заданное условие истинно, и вы не хотите визуализировать или делать что-либо еще, когда оно ложно. Давайте посмотрим на пример ниже:
import React,{useState} from 'react';
function UserDetails() {
const[user, setUser] = useState({
name:"Kenneth",
email:"[email protected]" });
return (
<div>
{user && (
<div>
<h2>{user.name}</h2>
<p>Email: {user.email}</p>
</div>
)}
</div>
);
}
export default UserDetails;
Глядя на приведенный выше пример, условие, данное логическому оператору &&, является состоянием, начальным значением которого является объект. Поэтому всякий раз, когда это состояние истинно, будет отображаться div, который будет отображать имя пользователя (в данном случае «Кеннет») и адрес электронной почты («[email protected]»), в противном случае будет отображаться пустой div. Это полезная техника, когда вы хотите избежать рендеринга элементов с отсутствующими или неопределенными данными.
Логический || Оператор( || )
Логический || оператор может использоваться для предоставления значения по умолчанию, когда определенное условие не выполняется или ложно: Ниже приведен пример:
import React from 'react';
function UserProfile({ user }) {
const defaultUser = { name: 'Guest', email: '[email protected]' };
const currentUser = user || defaultUser;
return (
<div>
<h2>{currentUser.name}</h2>
<p>Email: {currentUser.email}</p>
</div>
);
}
export default UserProfile;
В приведенном выше примере переменная «currentUser» устанавливается в «defaultUser» только тогда, когда реквизит «user» является ложным. Но насколько «пользовательская» опора верна, она всегда будет отображаться. Логический || оператор работает следующим образом: сначала он проверяет условие первого переданного ему выражения (выражение справа), если оно истинно, то использует его, а если ложно, то использует второе выражение (выражение справа). левая сторона). Это отличается от логического оператора &&, который отображается только тогда, когда данное условие истинно, и ничего не делает, когда ложно.
Заявление о переключении
Переключатель условного рендеринга используется при наличии более сложных сценариев условного рендеринга. Например, когда у вас есть несколько условий с разными возможными результатами, и вам нужно отобразить элемент или компонент на основе любого из результатов. Вот пример:
import React from 'react';
function OrderStatus({ status }) {
switch (status) {
case 'pending':
return <p>Your order is pending.</p>;
case 'shipped':
return <p>Your order has been shipped.</p>;
case 'delivered':
return <p>Your order has been delivered.</p>;
default:
return <p>Invalid order status.</p>;
}
}
export default OrderStatus;
В приведенном выше примере оператор switch используется для указания того, какой элемент отображать на основе переданного ему значения реквизита, называемого «статус». Это означает, что когда значение «статус» равно «ожидание», тег ‹p› с текстом «Ваш заказ находится на рассмотрении». будет отображаться, когда он «отправлен», будет отображаться тег ‹p› с текстом «Ваш заказ отправлен» и так далее.
Заключение
В этой статье мы рассмотрели различные методы условного рендеринга, включая операторы if-else, тернарные операторы, логические && и || операторы и оператор switch. Понимание этих методов позволит вам создавать более гибкие и удобные приложения React.
