基于提供代码片段判断条件渲染组件及运行报错问题查询

首先还原你提供的代码片段如下：

function App() {
  const isAdmin = true;
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? (
        <AdminPanel />
      ) : isAdmin ? (
        <UserPanel />
      ) : (
        <GuestPanel />
      )}
    </div>
  );
}

现有逻辑的渲染结果 #

嵌套三元运算从左到右依次执行判断：

1. 第一个判断条件isLoggedIn值为false，跳过<AdminPanel />分支，进入下一层判断
2. 第二个判断条件isAdmin值为true，命中对应分支，因此现有代码逻辑会渲染UserPanel组件

报错原因及正确输出 #

你运行时出现报错大概率是以下两种原因：

• 未提前定义或导入AdminPanel、UserPanel、GuestPanel三个自定义组件，React无法找到组件声明会抛出引用错误，补全组件的导入/定义即可正常运行
• 现有嵌套三元的分支顺序不符合实际业务逻辑：如果你的需求是「登录的管理员展示管理面板、登录的普通用户展示用户面板、未登录用户展示访客面板」，现有逻辑是错误的，调整后的正确写法如下：

// 修正分支顺序后的条件渲染逻辑
{isLoggedIn ? (
  isAdmin ? <AdminPanel /> : <UserPanel />
) : (
  <GuestPanel />
)}

修正后按照你给出的变量值isLoggedIn=false，最终会渲染GuestPanel组件。

内容的提问来源于stack exchange，提问作者NameMC