Create: Update:
Как отрисовать компонент по условию?
В React отрисовка компонентов по условию осуществляется с помощью условных операторов JavaScript внутри JSX. Это позволяет отображать компоненты или элементы только тогда, когда выполняется определенное условие. Рассмотрим несколько способов условной отрисовки компонентов в React.
Использование тернарного оператора:
Тернарный оператор ? : позволяет компактно проверять условие и отрисовывать один из двух компонентов.
Пример:
import React from 'react';
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
};
export default MyComponent;
Логическое И (&&)
Можно использовать логический оператор
&& для отрисовки компонента только тогда, когда условие истинно.Пример:
import React from 'react';
const MyComponent = ({ showDetails }) => {
return (
<div>
<h1>Item</h1>
{showDetails && <p>Here are the details...</p>}
</div>
);
};
export default MyComponent;
Условный рендеринг с if...else
Для более сложной логики условного рендеринга можно использовать обычные операторы
if...else внутри функции компонента.Пример:
import React from 'react';
const MyComponent = ({ status }) => {
if (status === 'loading') {
return <p>Loading...</p>;
} else if (status === 'error') {
return <p>Error occurred!</p>;
} else if (status === 'success') {
return <p>Data loaded successfully!</p>;
} else {
return null; // Возвращаем null, чтобы не отрисовывать ничего
}
};
export default MyComponent;
Условный рендеринг с помощью функций
Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.
Пример:
import React from 'react';
const renderContent = (status) => {
switch (status) {
case 'loading':
return <p>Loading...</p>;
case 'error':
return <p>Error occurred!</p>;
case 'success':
return <p>Data loaded successfully!</p>;
default:
return null;
}
};
const MyComponent = ({ status }) => {
return (
<div>
{renderContent(status)}
</div>
);
};
export default MyComponent;
Использование IIFE (немедленно вызываемые функциональные выражения)
Можно использовать IIFE (Immediately Invoked Function Expression) для выполнения более сложной логики рендеринга внутри JSX.
Пример:
import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
return (
<div>
{(() => {
if (isLoggedIn) {
return <p>Welcome back, {userName}!</p>;
} else {
return <p>Please log in.</p>;
}
})()}
</div>
);
};
export default MyComponent;
👉 @frontendInterview
>>Click here to continue<<
Frontend Interview - собеседования по Javascript / Html / Css