如何在 React 中进行嵌套条件渲染？

Question

由于我正在从事的项目中角色/身份验证的工作方式，我以前没有遇到过这种情况。 登录时，代码返回用户只是用户还是管理员并呈现适当的组件，但如果用户是管理员，我需要有条件地评估 API 调用返回和有人搜索时的类别类型。 从盒子返回的数据将在组件中呈现。 共有三种数据类型：用户、组、帐户，这些类别值是从 state 检索到的，每个 API 调用返回类型。 （用户、组、帐户）必须为 3 个返回数据负载中的每一个呈现不同的布局。

此外，JSX 页面中的条件渲染可能不是解决此问题的合适方法，请随意提出一种完全（并且希望更优雅）的方式来做这样的事情？

{isAdmin &&
  {isCategory === 'user'
     <User />
  }
  {isCategory === 'group'
     <Group />
  }
  {isCategory === 'account'
      <Account />
  }
}
 
{isUser &&
  <User />
}

Answer 1

也许更清晰的方法是创建渲染 function

const renderAdmin = () => {
  switch(isCategory) {
    case 'user':
      return <User />
    case 'group':
      return <Group />
    case 'account':
      return <Account />
    default:
      return null;
  }
}

然后在渲染中

  <>
    {isUser &&  <User />}
    {isAdmin && renderAdmin()}
  </>