React 中的條件渲染

React 中的條件渲染可讓您根據某些條件（例如狀態或道具）渲染不同的元件或元素。以下是一些實作條件渲染的常用方法：

1. 使用 If-Else 語句

您可以在元件內使用標準 JavaScript if-else 語句。

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

2. 使用三元運算子

這是一種根據條件呈現內容的簡潔方法。

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

3. 使用邏輯&&運算子

只有當條件為真時，您才可以使用邏輯 AND 運算子來渲染元件。

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

4. Switch 語句

對於較複雜的條件，可以使用 switch 語句。

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return <h1 id="Loading">Loading...</h1>;
        case 'success':
            return <h1 id="Data-loaded-successfully">Data loaded successfully!</h1>;
        case 'error':
            return <h1 id="There-was-an-error">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 id="Welcome-back">Welcome back!</h1> : <h1 id="Please-sign-in">Please sign in.</h1>}
        </div>
    );
}

export default App;

概括

根據您的情況複雜程度和個人編碼風格選擇最適合您需求的方法。如果您需要更多範例或解釋，請告訴我！

以上是React 中的條件渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！