நிபந்தனை ரெண்டரிங் மற்றும் லூப்ஸ் இன் React

JSX இல் நிபந்தனை அறிக்கைகள் மற்றும் லூப் கட்டமைப்புகளைப் பயன்படுத்தி ரெண்டரிங் நிபந்தனைகள் மற்றும் லூப்கள் React செய்யப்படுகின்றன.

 

1. ரெண்டரிங் நிபந்தனைகள்

- பயன்படுத்துதல்: நீங்கள் JSX இல் உள்ள கட்டமைப்பைப் பயன்படுத்தி ஒரு நிபந்தனையைச் சரிபார்த்து, அந்த நிபந்தனையின் அடிப்படையில் வெவ்வேறு கூறுகளை வழங்கலாம். if-else if-else

For உதாரணமாக:

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

- டெர்னரி ஆபரேட்டரைப் பயன்படுத்துதல்: JSX இல் கட்டமைப்பைக் குறைக்க மும்மை ஆபரேட்டரையும் பயன்படுத்தலாம். if-else

For உதாரணமாக:

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

- தருக்க && ஆபரேட்டரைப் பயன்படுத்துதல்: நிபந்தனை உண்மையாக இருந்தால் மட்டுமே நீங்கள் ஒரு உறுப்பைக் காட்ட விரும்பினால், நீங்கள் தருக்க && ஆபரேட்டரைப் பயன்படுத்தலாம்.

For உதாரணமாக:

{isLoggedIn && <WelcomeUser />}

 

2. ரெண்டரிங் லூப்கள்

- பயன்படுத்துதல்: நீங்கள் ஒரு அணிவரிசையில் மீண்டும் மீண்டும் செய்யவும் மற்றும் JSX இல் தொடர்புடைய கூறுகளை வழங்கவும் முறையைப் பயன்படுத்தலாம். map map

For உதாரணமாக

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

- ஒரு லூப்பைப் பயன்படுத்துதல்: நீங்கள் ஒரு வரிசையின் மீது மீண்டும் ஒரு சுழற்சியைப் for பயன்படுத்தலாம் மற்றும் JSX இல் தொடர்புடைய கூறுகளை வழங்கலாம். for

For உதாரணமாக:

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

- for ஒவ்வொன்றையும் பயன்படுத்துதல்: நீங்கள் for ஒவ்வொரு முறையையும் பயன்படுத்தி ஒரு வரிசையை மீண்டும் செய்யவும் மற்றும் JSX இல் தொடர்புடைய கூறுகளை வழங்கவும்.

For உதாரணமாக:

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

 

இதில் உள்ள நிபந்தனைகள் மற்றும் சுழல்கள் React நெகிழ்வான மற்றும் மாறும் UIகளை உருவாக்க உங்களை அனுமதிக்கின்றன. JSX இல் நிபந்தனை அறிக்கைகள் மற்றும் லூப் கட்டமைப்புகளைப் பயன்படுத்துவதன் மூலம், நீங்கள் வெவ்வேறு கூறுகளைக் காட்டலாம் மற்றும் உங்கள் பயன்பாட்டில் உள்ள தரவின் அடிப்படையில் பட்டியல்களை உருவாக்கலாம் React.