Bedingtes Rendern in React ermöglicht es Ihnen, verschiedene Komponenten oder Elemente basierend auf bestimmten Bedingungen, wie z. B. Zustand oder Requisiten, zu rendern. Hier sind einige gängige Methoden zum Erreichen eines bedingten Renderings:

1. If-Else-Anweisungen verwenden

Sie können in Ihrer Komponente standardmäßige JavaScript-if-else-Anweisungen verwenden.

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

2. Ternäre Operatoren verwenden

Dies ist eine prägnante Möglichkeit, Inhalte basierend auf einer Bedingung darzustellen.

function MyComponent({ isLoggedIn }) {
    return (
        

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

3. Verwenden des logischen &&-Operators

Sie können den logischen UND-Operator verwenden, um eine Komponente nur dann zu rendern, wenn eine Bedingung wahr ist.

function MyComponent({ isLoggedIn }) {
    return (
        

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

4. Switch-Anweisung

Für komplexere Bedingungen können Sie eine Switch-Anweisung verwenden.

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;
    }
}

Beispiel

Hier ist ein vollständiges Beispiel mit Funktionskomponenten:

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;

Zusammenfassung

Wählen Sie die Methode, die Ihren Anforderungen am besten entspricht, basierend auf der Komplexität Ihrer Bedingungen und Ihrem persönlichen Codierungsstil. Lassen Sie mich wissen, wenn Sie weitere Beispiele oder Erklärungen benötigen!