React での条件付きレンダリング

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

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

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

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

2. 三項演算子の使用

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

function MyComponent({ isLoggedIn }) {
    return (
        <h1>
            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        </h1>
    );
}

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

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

function MyComponent({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn && <h1>Welcome back!</h1>}
            {!isLoggedIn && <h1>Please sign in.</h1>}
        </div>
    );
}

4. Switch ステートメント

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

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

例

機能コンポーネントを使用した完全な例を次に示します:

import React from 'react';

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

    return (
        <div>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

export default App;

まとめ

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

以上がReact での条件付きレンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。