Utoaji wa Masharti na Kuingia React

Masharti ya uwasilishaji na mizunguko ndani React hufanywa kwa kutumia taarifa za masharti na miundo ya kitanzi katika JSX.

 

1. Masharti ya utoaji

- Kutumia: Unaweza kutumia muundo katika JSX kuangalia hali na kutoa vipengele tofauti kulingana na hali hiyo. if-else if-else

For mfano:

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

- Kwa kutumia ternary operator: Unaweza pia kutumia ternary operator kufupisha muundo katika JSX. if-else

For mfano:

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

- Kwa kutumia && opereta kimantiki: Unapotaka tu kuonyesha kipengele ikiwa hali ni kweli, unaweza kutumia && opereta kimantiki.

For mfano:

{isLoggedIn && <WelcomeUser />}

 

2. Utoaji wa loops

- Kutumia: Unaweza kutumia njia ya kurudia juu ya safu na kutoa vipengele vinavyolingana katika JSX. map map

For mfano

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

- Kutumia for kitanzi: Unaweza pia kutumia for kitanzi ili kusisitiza juu ya safu na kutoa vipengele vinavyolingana katika JSX.

For mfano:

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

- Kutumia for Kila: Unaweza pia kutumia for Kila mbinu kusisitiza juu ya safu na kutoa vipengele vinavyolingana katika JSX.

For mfano:

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

 

Masharti na mizunguko ndani React hukuruhusu kuunda UI zinazonyumbulika na zinazobadilika. Kwa kutumia taarifa za masharti na miundo ya kitanzi katika JSX, unaweza kuonyesha vipengele tofauti na kutoa orodha kulingana na data katika React programu yako.