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

【问题标题】：How to do nested conditional rendering in React?如何在 React 中进行嵌套条件渲染？
【发布时间】：2022-05-11 02:34:16
【问题描述】：

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

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

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

【问题讨论】：

不确定我是否理解您的要求，但您可能只需要替换嵌套的{}。它们不是必需的，实际上是语法错误。试试{ isAdmin && ( (isCategory === 'user' && <User />) || (isCategory === 'group' && <Group />) ) } 之类的东西。您应该仅在类似 xml 的结构中使用 {} 以将语法“切换”回 JS。在你这样做之后 - 当你编写常规 JS 时 - 不需要使用 {} 进行嵌入，因为没有需要嵌入的 jsx。

标签： javascript node.js reactjs redux react-router

【解决方案1】：

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

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

然后在渲染中

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

【讨论】：