Question

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

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

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

Answer 1

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

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

然后在渲染

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

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

1 个答案: