Frontend | Вопросы собесов on Telegram: “📌 Как отрисовать компонент по условию? 💬 Спраш…”

📌 Как отрисовать компонент по условию?

💬 Спрашивают в 6% собеседований

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

1️⃣ Использование тернарного оператора

Тернарный оператор ? : позволяет компактно проверять условие и отрисовывать один из двух компонентов.

🤔 Пример:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        </div>
    );
};

export default MyComponent;

2️⃣ Логическое И (&&)

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

🤔 Пример:

import React from 'react';
const MyComponent = ({ showDetails }) => {
    return (
        <div>
            <h1>Item</h1>
            {showDetails && <p>Here are the details...</p>}
        </div>
    );
};
export default MyComponent;

3️⃣ Условный рендеринг с 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;

4️⃣ Условный рендеринг с помощью функций

Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.

🤔 Пример:

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;

5️⃣ Использование 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;

🤔 Итог

Условная отрисовка компонентов в React может быть выполнена различными способами, в зависимости от сложности логики и предпочтений:

1️⃣ Тернарный оператор: Компактный и удобный для простых условий.
2️⃣ Логическое И (&&): Легкий способ отрисовать компонент, если условие истинно.
3️⃣ if...else: Подходит для более сложной логики.
4️⃣ Функции: Помогают структурировать код и повторно использовать логику.
5️⃣ IIFE: Используются для более сложных выражений внутри JSX.

Короче говоря: Для условной отрисовки компонентов в React используйте тернарный оператор, логическое И, if...else, функции или IIFE. Выбор метода зависит от сложности условий и структуры кода.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых