सशर्त रेन्डरिङ र लूप इन React

रेन्डरिङ सर्तहरू र लूपहरू React JSX मा सशर्त कथनहरू र लुप संरचनाहरू प्रयोग गरी गरिन्छ।

 

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 लूप प्रयोग गर्दै: तपाइँ for एर्रेमा पुनरावृत्ति गर्न र JSX मा सम्बन्धित तत्वहरू रेन्डर गर्न पनि लुप प्रयोग गर्न सक्नुहुन्छ।

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 हरू सिर्जना गर्न अनुमति दिन्छ। React JSX मा सशर्त कथनहरू र लुप संरचनाहरू प्रयोग गरेर, तपाईंले विभिन्न तत्वहरू प्रदर्शन गर्न सक्नुहुन्छ र तपाईंको अनुप्रयोगमा डाटामा आधारित सूचीहरू उत्पन्न गर्न सक्नुहुन्छ।