面试题：React复杂条件下多分支渲染的基础实现

Question

在React项目中，假设需要根据用户的登录状态（已登录、未登录、登录过期）以及用户的权限级别（普通用户、管理员、超级管理员）来进行多分支渲染。请描述如何使用`if - else`语句和`switch - case`语句分别实现这种复杂条件下的多分支渲染，并给出简单的代码示例。

Answer 1

使用 if - else 语句实现

1. 思路：通过一系列if - else条件判断，根据不同的登录状态和权限级别进行渲染。
2. 代码示例：

import React from'react';

const UserComponent = ({ loginStatus, permissionLevel }) => {
    let content;
    if (loginStatus === '已登录') {
        if (permissionLevel === '普通用户') {
            content = <div>普通用户已登录内容</div>;
        } else if (permissionLevel === '管理员') {
            content = <div>管理员已登录内容</div>;
        } else if (permissionLevel === '超级管理员') {
            content = <div>超级管理员已登录内容</div>;
        }
    } else if (loginStatus === '未登录') {
        content = <div>请登录</div>;
    } else if (loginStatus === '登录过期') {
        content = <div>登录已过期，请重新登录</div>;
    }
    return content;
};

export default UserComponent;

使用 switch - case 语句实现

1. 思路：先通过switch判断登录状态，在每个登录状态的case中再嵌套switch判断权限级别。
2. 代码示例：

import React from'react';

const UserComponent = ({ loginStatus, permissionLevel }) => {
    let content;
    switch (loginStatus) {
        case '已登录':
            switch (permissionLevel) {
                case '普通用户':
                    content = <div>普通用户已登录内容</div>;
                    break;
                case '管理员':
                    content = <div>管理员已登录内容</div>;
                    break;
                case '超级管理员':
                    content = <div>超级管理员已登录内容</div>;
                    break;
                default:
                    content = <div>未知权限</div>;
            }
            break;
        case '未登录':
            content = <div>请登录</div>;
            break;
        case '登录过期':
            content = <div>登录已过期，请重新登录</div>;
            break;
        default:
            content = <div>未知状态</div>;
    }
    return content;
};

export default UserComponent;