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。