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

- การใช้ตัวดำเนินการ ternary: คุณยังสามารถใช้ตัวดำเนินการ ternary เพื่อย่อโครงสร้าง ใน 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 Each: คุณยังสามารถใช้ for Each method เพื่อวนซ้ำอาร์เรย์และเรนเดอร์องค์ประกอบที่สอดคล้องกันใน JSX

For ตัวอย่าง:

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

 

เงื่อนไขและลูปใน React ช่วยให้คุณสร้าง UI ที่ยืดหยุ่นและไดนามิก เมื่อใช้คำสั่งเงื่อนไขและโครงสร้างลูปใน JSX คุณสามารถแสดงองค์ประกอบต่างๆ และสร้างรายการตามข้อมูลใน React แอปพลิเคชัน ของคุณ