close

条件渲染和循环 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 />}

- 使用逻辑 && 运算符：当您只想在条件为 true 时显示元素时，可以使用逻辑 && 运算符。

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 Each：您还可以使用 for Each 方法来迭代数组并在 JSX 中渲染相应的元素。

For 例子： 

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

 

条件和循环 React 允许您创建灵活且动态的 UI。 通过在 JSX 中使用条件语句和循环结构，您可以显示不同的元素并根据应用 React 程序中的数据生成列表。