Условный рендеринг в React позволяет визуализировать различные компоненты или элементы на основе определенных условий, таких как состояние или реквизиты. Вот несколько распространенных методов условного рендеринга:

1. Использование операторов if-else

Внутри вашего компонента можно использовать стандартные операторы JavaScript if-else.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. Использование тернарных операторов

Это краткий способ рендеринга контента на основе условия.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

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

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

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. Оператор Switch

Для более сложных условий можно использовать оператор переключения.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

Пример

Вот полный пример использования функциональных компонентов:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

Краткое содержание

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