几种React中常用的条件渲染

在 React 中进行条件渲染有多种方式，可以根据需求和代码风格选择适合的方式。以下是几种常见的条件渲染方法：

1. 使用 if 语句

在函数体中使用 if 语句来进行条件渲染。

javascript
复制代码
function Greeting({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
    } else {
        return <h1>Please sign up.</h1>;
    }
}

2. 使用三元运算符

在 JSX 中使用三元运算符进行条件渲染。

javascript
复制代码
function Greeting({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
        </div>
    );
}

3. 使用逻辑与运算符（&&）

当需要在条件为 true 时才渲染某些内容，可以使用逻辑与运算符。

javascript
复制代码
function Mailbox({ unreadMessages }) {
    return (
        <div>
            <h1>Hello!</h1>
            {unreadMessages.length > 0 && (
                <h2>You have {unreadMessages.length} unread messages.</h2>
            )}
        </div>
    );
}

4. 使用逻辑或运算符（||）

当需要在条件为 false 时渲染某些默认内容，可以使用逻辑或运算符。

javascript
复制代码
function UserGreeting({ isLoggedIn }) {
    return <h1>{isLoggedIn || 'Please sign up.'}</h1>;
}

5. 使用 IIFE (立即调用函数表达式)

对于更复杂的条件渲染，可以使用立即调用函数表达式（IIFE）。

javascript
复制代码
function Greeting({ isLoggedIn }) {
    return (
        <div>
            {(() => {
                if (isLoggedIn) {
                    return <h1>Welcome back!</h1>;
                } else {
                    return <h1>Please sign up.</h1>;
                }
            })()}
        </div>
    );
}

示例：结合条件渲染和状态管理

以下是一个完整的例子，展示了如何结合条件渲染和状态管理来实现一个简单的登录逻辑。

javascript
复制代码
import { useState } from 'react';

function LoginControl() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLoginClick = () => {
        setIsLoggedIn(true);
    };

    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    };

    let button;
    if (isLoggedIn) {
        button = <button onClick={handleLogoutClick}>Logout</button>;
    } else {
        button = <button onClick={handleLoginClick}>Login</button>;
    }

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    );
}

function Greeting({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
    }
    return <h1>Please sign up.</h1>;
}

export default LoginControl;

解释：

• LoginControl 组件管理 isLoggedIn 状态，并根据该状态渲染不同的按钮和问候语。
• Greeting 组件根据 isLoggedIn 属性进行条件渲染。

这几种方法可以灵活地用于各种场景下的条件渲染，根据具体需求选择适合的方式即可。