Bedingtes Rendering in React

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 <h1 id="Welcome-back">Welcome back!</h1>;
    } else {
        return <h1 id="Please-sign-in">Please sign in.</h1>;
    }
}

2. Ternäre Operatoren verwenden

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

function MyComponent({ isLoggedIn }) {
    return (
        <h1>
            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        </h1>
    );
}

3. Verwenden des logischen &&-Operators

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

function MyComponent({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn && <h1 id="Welcome-back">Welcome back!</h1>}
            {!isLoggedIn && <h1 id="Please-sign-in">Please sign in.</h1>}
        </div>
    );
}

4. Switch-Anweisung

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

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return <h1 id="Loading">Loading...</h1>;
        case 'success':
            return <h1 id="Data-loaded-successfully">Data loaded successfully!</h1>;
        case 'error':
            return <h1 id="There-was-an-error">There was an error!</h1>;
        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 (
        <div>
            <button onclick="{()"> setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1 id="Welcome-back">Welcome back!</h1> : <h1 id="Please-sign-in">Please sign in.</h1>}
        </div>
    );
}

export default App;

Zusammenfassung

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

Das obige ist der detaillierte Inhalt vonBedingtes Rendering in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!