ReactJS: Construirea de componente dinamice cu randare condiționată

Ce este redarea condiționată în React?

React este o bibliotecă JavaScript front-end declarativă și open-source utilizată pentru construirea de componente eficiente ale interfeței cu utilizatorul. Redarea condiționată este o caracteristică din React care permite dezvoltatorilor să redeze diferite componente sau conținut în cadrul componentelor pe baza anumitor condiții, stări, intrări de utilizator sau disponibilitatea datelor. Poate minimiza codul redundant, permițând componente mai reutilizabile și dinamice.

Pentru ca componentele să afișeze utilizatorilor rezultate specifice, în funcție de diferite condiții, putem folosi sintaxa JavaScript logică, cum ar fi if/else instrucțiuni, switch case statements em>, operatori ternari și operatorii „&&”pentru a schimba ceea ce va returna componenta de randare.

În exemplele de mai jos, componenta UserList este părintele componentei User. În componenta noastră părinte, redăm componente secundare care vor primi elemente de recuzită cu nume (șir) și isVerified (boolean).

dacă/altfel

function User({ name, isVerified }) {
  if(isVerified) {
    return <li className="user">{name}⭐️</li>;
  }
  return <li className="user">{name}</li>;
}

export default function UserList() {
  return (
    <div>
      <h1>List of Users:</h1>
      <ul>
        <User
          name={"John"}
          isVerified={false}
        />
        <User
          name={"Mary"}
          isVerified={true}
        />
        <User
          name={"Ryan"}
          isVerified={false}
        />
      </ul>
    </div>
  );
}

Dacă indicația isVerified pentru utilizator este adevărată, atunci componenta Utilizator va returna un „⭐️” lângă numele utilizatorului.

comutați

function User({ name, isVerified }) {
  switch(isVerified) {
    case true:
      return <li className="user">{name}⭐️</li>;
    case false:
      return <li className="user">{name}</li>;
  }
}

Aceeași logică poate fi exprimată într-o declarație switch case prezentată mai sus.

ternar

function User({ name, isVerified }) {
  return (
    <li className="user">
      {isVerified ? name + "⭐️" : name} 
    </li>
  );
}

Operatorul ternar este extrem de util în reducerea redundanței și producerea unui cod mai curat prezentat de codul de mai sus.

// ternary operator syntax
condition ? truthyExpression : falsyExpression

&&

function User({ name, isVerified }) {
  return (
    <li className="user">
      {name} {isVerified && "⭐️"} 
    </li>
  );
}

În cele din urmă, utilizarea operatorului && este o altă metodă de a scrie mai puțin cod pentru a obține același rezultat logic. Dacă isVerified este egal cu adevărat, atunci steaua va fi afișată. În caz contrar, va fi afișat numai numele.

Redarea condiționată este o caracteristică esențială în ReactJS, deoarece permite dezvoltatorilor să creeze componente interactive și dinamice ale interfeței de utilizare. Fără randare condiționată, ar fi mult mai dificil să se creeze componente reutilizabile care se pot adapta la diferite scenarii și condiții.

Iată câteva surse utile pentru a afla mai multe despre redarea condiționată: