面试题：React中条件渲染的一个常见坑及解决办法

常遇到的渲染问题及示例

空值渲染错误：
- 示例：假设我们有一个组件接收一个用户对象user，并尝试显示用户的名字。如果user可能为null或undefined，直接使用{user.name}会导致错误。例如：

function UserComponent({ user }) {
    return <div>{user.name}</div>;
}

问题原因：当user为null或undefined时，user.name会引发TypeError，因为在null或undefined上不存在name属性。

复杂条件判断混乱：
- 示例：假设有一个组件根据用户的角色和权限来显示不同的内容。例如，一个管理系统中，用户可能有“admin”“editor”“viewer”等角色，不同角色有不同的操作权限。代码如下：

function AdminPanel({ user }) {
    if (user.role === 'admin') {
        return <div>
            <h1>Admin Panel</h1>
            <p>You can manage all users and settings.</p>
        </div>;
    } else if (user.role === 'editor') {
        return <div>
            <h1>Editor Panel</h1>
            <p>You can edit articles and content.</p>
        </div>;
    } else if (user.role === 'viewer') {
        return <div>
            <h1>Viewer Panel</h1>
            <p>You can only view the content.</p>
        </div>;
    } else {
        return null;
    }
}

问题原因：随着条件逻辑变得复杂，代码变得冗长且难以维护。如果新增一个角色，需要在多个地方修改代码，容易引入错误。

解决方法

针对空值渲染错误：
- 使用逻辑与（&&）运算符：

function UserComponent({ user }) {
    return <div>{user && user.name}</div>;
}

这样当user为null或undefined时，user && user.name的结果为false，不会尝试访问user.name，从而避免错误。
使用Optional Chaining（可选链操作符，ES2020 新增）：

function UserComponent({ user }) {
    return <div>{user?.name}</div>;
}

可选链操作符?.会在尝试访问name属性前先检查user是否为null或undefined，如果是则返回undefined，不会引发错误。

针对复杂条件判断混乱：
- 使用对象映射：

function AdminPanel({ user }) {
    const roleComponents = {
        admin: <div>
            <h1>Admin Panel</h1>
            <p>You can manage all users and settings.</p>
        </div>,
        editor: <div>
            <h1>Editor Panel</h1>
            <p>You can edit articles and content.</p>
        </div>,
        viewer: <div>
            <h1>Viewer Panel</h1>
            <p>You can only view the content.</p>
        </div>
    };
    return roleComponents[user.role] || null;
}

这样将条件逻辑转换为对象映射，代码更加简洁和可维护。如果新增一个角色，只需要在roleComponents对象中添加新的映射即可。
使用switch语句（虽然不如对象映射简洁，但也是一种选择）：

function AdminPanel({ user }) {
    let panel;
    switch (user.role) {
        case 'admin':
            panel = <div>
                <h1>Admin Panel</h1>
                <p>You can manage all users and settings.</p>
            </div>;
            break;
        case 'editor':
            panel = <div>
                <h1>Editor Panel</h1>
                <p>You can edit articles and content.</p>
            </div>;
            break;
        case 'viewer':
            panel = <div>
                <h1>Viewer Panel</h1>
                <p>You can only view the content.</p>
            </div>;
            break;
        default:
            panel = null;
    }
    return panel;
}

switch语句可以使复杂条件判断更加清晰，但相比于对象映射，代码量稍多一些。

星途面试题库

面试题：React中条件渲染的一个常见坑及解决办法

知识考点

面试题答案

常遇到的渲染问题及示例

解决方法