Условный рендеринг и циклы 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 метод Each для перебора массива и рендеринга соответствующих элементов в JSX.

For пример:

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

 

Условия и циклы React позволяют создавать гибкие и динамичные пользовательские интерфейсы. Используя условные операторы и структуры циклов в JSX, вы можете отображать различные элементы и создавать списки на основе данных вашего React приложения.