Rendering me kusht dhe sythe brenda React

Kushtet e paraqitjes dhe sythe në React janë bërë duke përdorur deklarata të kushtëzuara dhe struktura të ciklit në JSX.

 

1. Kushtet e paraqitjes

- Përdorimi: Ju mund të përdorni strukturën në JSX për të kontrolluar një kusht dhe për të dhënë elementë të ndryshëm bazuar në atë kusht. if-else if-else

For shembull:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- Përdorimi i operatorit tresh: Mund të përdorni gjithashtu operatorin tresh për të shkurtuar strukturën në JSX. if-else

For shembull:

 {isLoggedin ? <WelcomeUser />: <Login />}

- Përdorimi i operatorit logjik &&: Kur dëshironi të shfaqni një element vetëm nëse një kusht është i vërtetë, mund të përdorni operatorin logjik &&.

For shembull:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering sythe

- Përdorimi: Ju mund të përdorni metodën për të përsëritur mbi një grup dhe për të dhënë elementët përkatës në JSX. map map

For shembull

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- Përdorimi i një for cikli: Ju gjithashtu mund të përdorni një for lak për të përsëritur mbi një grup dhe për të dhënë elementët përkatës në JSX.

For shembull:

let usersList = [];
for(let i = 0; i < users.length; i++) {  
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);  
}  
return <ul>{usersList}</ul>;  

- Përdorimi i for secilit: Ju gjithashtu mund të përdorni for metodën Every për të përsëritur mbi një grup dhe për të dhënë elementët përkatës në JSX.

For shembull:

let usersList = [];  
users.forEach((user) => {  
  usersList.push(<li key={user.id}>{user.name}</li>);  
});  
return <ul>{usersList}</ul>;

 

Kushtet dhe nyjet në React ju lejojnë të krijoni UI fleksibël dhe dinamikë. Duke përdorur deklarata të kushtëzuara dhe struktura të ciklit në JSX, ju mund të shfaqni elementë të ndryshëm dhe të gjeneroni lista bazuar në të dhënat në React aplikacionin tuaj.