React の条件付きレンダリングを使用すると、状態やプロパティなどの特定の条件に基づいてさまざまなコンポーネントや要素をレンダリングできます。条件付きレンダリングを実現するための一般的な方法をいくつか示します:

1. If-Else ステートメントの使用

コンポーネント内で標準の JavaScript if-else ステートメントを使用できます。

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. 三項演算子の使用

これは、条件に基づいてコンテンツをレンダリングする簡潔な方法です。

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. 論理演算子&&の使用

論理 AND 演算子を使用すると、条件が true の場合にのみコンポーネントをレンダリングできます。

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. Switch ステートメント

より複雑な条件の場合は、switch ステートメントを使用できます。

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

例

機能コンポーネントを使用した完全な例は次のとおりです:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

まとめ

条件の複雑さと個人のコーディング スタイルに基づいて、ニーズに最も適した方法を選択してください。さらに例や説明が必要な場合はお知らせください。