de Donavon West

Redarea condiționată în React folosind Ternaries și AND logice

Redarea conditionata in React folosind Ternaries si AND logice
Fotografie de Biserica Brendan pe Unsplash

Există mai multe moduri în care componenta dvs. React poate decide ce să redea. Puteți folosi tradiționalul if declarație sau switch afirmație. În acest articol, vom explora câteva alternative. Fiți avertizat însă că unii vin cu propriile lor probleme, dacă nu sunteți atenți.

Ternar vs if / else

Să presupunem că avem o componentă care este trecută a name recuzită. Dacă șirul nu este gol, afișăm un mesaj de salut. În caz contrar, îi spunem utilizatorului că trebuie să se conecteze.

Iată o componentă de funcție fără stat (SFC) care face exact asta.

const MyComponent = ({ name }) => {  if (name) {    return (      <div className="hello">        Hello {name}      </div>    );  }  return (    <div className="hello">      Please sign in    </div>  );};

Destul de direct. Dar putem face mai bine. Iată aceeași componentă scrisă folosind un operator ternar condiționat.

const MyComponent = ({ name }) => (  <div className="hello">    {name ? `Hello ${name}` : 'Please sign in'}  </div>);

Observați cât de concis este acest cod în comparație cu exemplul de mai sus.

Câteva lucruri de remarcat. Deoarece utilizăm forma de declarație unică a funcției săgeată, return declarația este implicită. De asemenea, utilizarea unui ternar ne-a permis să uscăm duplicatul <div className="hello “> marcare.?

Ternar vs Logic ȘI

După cum puteți vedea, ternarii sunt minunați pentru if/else condiții. Dar ce zici de simplu if condiții?

Să ne uităm la un alt exemplu. Dacă isPro (un boolean) este true, trebuie să afișăm un emoji trofeu. De asemenea, trebuie să redăm numărul de stele (dacă nu zero). Am putea face asta așa.

const MyComponent = ({ name, isPro, stars}) => (  <div className="hello">    <div>      Hello {name}      {isPro ? '?' : null}    </div>    {stars ? (      <div>        Stars:{'⭐️'.repeat(stars)}      </div>    ) : null}  </div>); 

Dar observați că condițiile „altceva” revin null. Aceasta deoarece un ternar așteaptă o altă condiție.

Pentru simplu if condiții, am putea folosi ceva puțin mai potrivit: logic ȘI operator. Iată același cod scris folosind un AND logic.

const MyComponent = ({ name, isPro, stars}) => (  <div className="hello">    <div>      Hello {name}      {isPro && '?'}    </div>    {stars && (      <div>        Stars:{'⭐️'.repeat(stars)}      </div>    )}  </div>); 

Nu prea diferit, dar observați cum am eliminat : null (adică condiție else) la sfârșitul fiecărui ternar. Totul ar trebui să redea la fel ca înainte.

Hei! Ce dă cu Ioan? Este un 0 când nu trebuie redat nimic. La asta m-am referit mai sus. Iata de ce.

Potrivit MDN, un AND logic (adică &&):

expr1 && expr2

Se intoarce expr1 dacă poate fi convertit în false; în caz contrar, se întoarce expr2. Astfel, atunci când este utilizat cu valori booleene, && se intoarce true dacă ambii operanzi sunt adevărați; în caz contrar, se întoarce false.

OK, înainte de a începe să-ți tragi părul, lasă-mă să-ți descompun pentru tine.

În cazul nostru, expr1 este variabila stars, care are o valoare de 0. Pentru că zero este fals, 0 este returnat și redat. Vezi, nu a fost prea rău.

Aș scrie asta simplu.

Dacă expr1 este fals, revine expr1, altfel se întoarce expr2.

Deci, atunci când se utilizează un AND logic cu valori non-booleene, trebuie să facem ca valoarea falsey să returneze ceva pe care React nu îl va reda. Spune, ca o valoare de false.

Există câteva modalități prin care putem realiza acest lucru. Să încercăm asta în schimb.

{!!stars && (  <div>    {'⭐️'.repeat(stars)}  </div>)}

Observați operatorul double bang (adică !!) în fața stars. (Ei bine, de fapt nu există un „operator bang bang”. Folosim doar operatorul bang de două ori.)

Primul operator bang va constrânge valoarea lui stars într-un boolean și apoi efectuați o operație NU. Dacă stars este 0, apoi !stars va produce true.

Apoi efectuăm o a doua operație NU, deci dacă stars este 0, !!stars ar produce false. Exact ceea ce ne dorim.

Dacă nu ești fan !!, puteți forța, de asemenea, un boolean ca acesta (care mi se pare puțin vorbitor).

{Boolean(stars) && (

Sau pur și simplu dați un comparator care are ca rezultat o valoare booleană (ceea ce unii ar putea spune că este și mai semantică).

{stars > 0 && (

Un cuvânt pe corzi

Valorile șirurilor goale suferă aceeași problemă ca și numerele. Dar, deoarece un șir gol redat este invizibil, nu este o problemă cu care probabil va trebui să vă confruntați sau chiar să observați. Cu toate acestea, dacă sunteți perfecționist și nu doriți un șir gol pe DOM, ar trebui să luați măsuri de precauție similare cu cele pentru numerele de mai sus.

O altă soluție

O posibilă soluție și una care va evolua către alte variabile în viitor ar fi crearea unei separări shouldRenderStars variabil. Apoi aveți de-a face cu valori booleene în AND-ul vostru logic.

const shouldRenderStars = stars > 0;
return (  <div>    {shouldRenderStars && (      <div>        {'⭐️'.repeat(stars)}      </div>    )}  </div>);

Apoi, dacă în viitor, regula afacerii este că trebuie să fii conectat, să deții un câine și să bei bere ușoară, ai putea schimba modul în care shouldRenderStars este calculat, iar ceea ce este returnat va rămâne neschimbat. De asemenea, ați putea plasa această logică în altă parte unde este testabilă și să păstrați randarea explicită.

const shouldRenderStars =   stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;
return (  <div>    {shouldRenderStars && (      <div>        {'⭐️'.repeat(stars)}      </div>    )}  </div>);

Concluzie

Sunt de părere că ar trebui să folosiți cel mai bine limba. Iar pentru JavaScript, aceasta înseamnă utilizarea operatorilor ternari condiționați pentru if/else condiții și operatorii AND logici pentru simplă if condiții.

În timp ce ne-am putea retrage înapoi în locul nostru confortabil și sigur, unde folosim operatorul ternar peste tot, acum aveți cunoștințele și puterea de a merge mai departe ȘI de a prospera.

De asemenea, scriu pentru American Express Engineering Blog. Consultați celelalte lucrări ale mele și lucrările colegilor de muncă talentați de la AmericanExpress.io. Poti de asemenea urmărește-mă pe Twitter.