პირობითი რენდერი და მარყუჟები 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 Every მეთოდი მასივის გამეორებისთვის და JSX-ში შესაბამისი ელემენტების გადასატანად.

For მაგალითი:

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

 

პირობები და მარყუჟები React საშუალებას გაძლევთ შექმნათ მოქნილი და დინამიური ინტერფეისები. JSX-ში პირობითი განცხადებებისა და მარყუჟის სტრუქტურების გამოყენებით, შეგიძლიათ აჩვენოთ სხვადასხვა ელემენტები და შექმნათ სიები თქვენს React აპლიკაციაში არსებულ მონაცემებზე დაყრდნობით.