La renderización condicional en React le permite renderizar diferentes componentes o elementos según ciertas condiciones, como el estado o los accesorios. A continuación se muestran algunos métodos comunes para lograr la representación condicional:

1. Uso de declaraciones If-Else

Puedes usar declaraciones if-else de JavaScript estándar dentro de tu componente.

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

2. Uso de operadores ternarios

Esta es una forma concisa de representar contenido según una condición.

function MyComponent({ isLoggedIn }) {
    return (
        

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

3. Uso del operador lógico &&

Puedes usar el operador lógico AND para representar un componente solo si una condición es verdadera.

function MyComponent({ isLoggedIn }) {
    return (
        

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

4. Declaración de cambio

Para condiciones más complejas, puede utilizar una declaración de cambio.

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

Ejemplo

Aquí hay un ejemplo completo utilizando componentes funcionales:

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;

Resumen

Elija el método que mejor se adapte a sus necesidades según la complejidad de sus condiciones y su estilo de codificación personal. ¡Déjame saber si necesitas más ejemplos o explicaciones!