如何在 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()}
  </>