El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Renderització condicional

Següent ►
►

La renderització condicional en React permet mostrar diferents continguts o components en funció de certes condicions. Això és molt útil per crear aplicacions dinàmiques i interactives. En aquesta secció, aprendrem com implementar la renderització condicional utilitzant diverses tècniques.

Conceptes clau

  1. Operador ternari: Una manera concisa d'expressar condicions.
  2. Operador lògic AND (&&): Utilitzat per renderitzar un component només si una condició és certa.
  3. Declaracions if-else: Utilitzades per condicions més complexes.
  4. Funcions de renderització: Funcions que retornen components en funció de condicions.

Operador ternari

L'operador ternari és una manera concisa d'expressar condicions en una sola línia. La seva sintaxi és:

condició ? expressió_si_cert : expressió_si_fals

Exemple

import React from 'react';

function UserGreeting(props) {
  return <h1>Benvingut, {props.name}!</h1>;
}

function GuestGreeting() {
  return <h1>Si us plau, registra't.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    isLoggedIn ? <UserGreeting name="Joan" /> : <GuestGreeting />
  );
}

export default Greeting;

En aquest exemple, si isLoggedIn és true, es mostrarà el component UserGreeting. Si és false, es mostrarà el component GuestGreeting.

Operador lògic AND (&&)

L'operador lògic AND (&&) és útil per renderitzar un component només si una condició és certa.

Exemple

import React from 'react';

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Avís!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Amaga' : 'Mostra'}
        </button>
      </div>
    );
  }
}

export default Page;

En aquest exemple, el component WarningBanner només es renderitza si props.warn és true.

Declaracions if-else

Per a condicions més complexes, podem utilitzar declaracions if-else dins del mètode render.

Exemple

import React from 'react';

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false};
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <button onClick={this.handleLogoutClick}>Logout</button>;
    } else {
      button = <button onClick={this.handleLoginClick}>Login</button>;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

export default LoginControl;

En aquest exemple, es mostra un botó de "Login" o "Logout" en funció de l'estat isLoggedIn.

Funcions de renderització

Les funcions de renderització són funcions que retornen components en funció de condicions. Això pot ajudar a mantenir el codi més net i organitzat.

Exemple

import React from 'react';

function renderGreeting(isLoggedIn) {
  if (isLoggedIn) {
    return <UserGreeting name="Joan" />;
  }
  return <GuestGreeting />;
}

function Greeting(props) {
  return (
    <div>
      {renderGreeting(props.isLoggedIn)}
    </div>
  );
}

export default Greeting;

En aquest exemple, la funció renderGreeting decideix quin component renderitzar en funció de la condició isLoggedIn.

Exercicis pràctics

Exercici 1

Crea un component que mostri un missatge de benvinguda si l'usuari està autenticat i un missatge de registre si no ho està. Utilitza l'operador ternari per implementar la renderització condicional.

Solució

import React from 'react';

function WelcomeMessage(props) {
  return (
    <div>
      {props.isAuthenticated ? <h1>Benvingut, {props.username}!</h1> : <h1>Si us plau, registra't.</h1>}
    </div>
  );
}

export default WelcomeMessage;

Exercici 2

Crea un component que mostri un avís només si una condició és certa. Utilitza l'operador lògic AND (&&) per implementar la renderització condicional.

Solució

import React from 'react';

function AlertMessage(props) {
  return (
    <div>
      {props.showAlert && <div className="alert">Això és un avís!</div>}
    </div>
  );
}

export default AlertMessage;

Resum

En aquesta secció, hem après diverses tècniques per implementar la renderització condicional en React, incloent l'ús de l'operador ternari, l'operador lògic AND (&&), declaracions if-else i funcions de renderització. Aquestes tècniques ens permeten crear aplicacions més dinàmiques i interactives. A la següent secció, explorarem com treballar amb llistes i claus en React.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats