React中如何在return语句内正确添加if条件判断实现数组渲染

问题原因 #

• 原有逻辑将权限判断放在map遍历内部，数组长度为3，因此无论判断结果如何都会执行3次循环，else分支每次返回第一个slide元素，自然重复渲染3次
• 后续尝试将if放在map外侧时语法错误：JSX中嵌入的{ }内仅支持表达式，if是语句不能直接放在{ }中，因此无法运行

正确实现方式 #

方式1：外层用三元表达式做判断，不同分支返回不同渲染内容 #

直接在JSX中用三元表达式，权限验证通过就遍历整个数组渲染所有Tab，不通过就只渲染第一个Tab：

{
  auth.verify(Roles.role1) 
    ? slides.map(item => (
        <Tab
          label={item.title}
          key={item.index}
          component={Link}
          to={item.path}
        />
      ))
    : (
        <Tab
          label={slides[0].title}
          key={slides[0].index}
          component={Link}
          to={slides[0].path}
        />
      )
}

方式2：提前处理要渲染的数组，再统一遍历 #

如果后续可能会有其他权限对应不同的可渲染slide，也可以先根据权限筛选出要渲染的数组，再统一map，逻辑更清晰易维护：

// 先根据权限筛选出要渲染的项
const renderSlides = auth.verify(Roles.role1) ? slides : [slides[0]];

// 再统一遍历渲染
{
  renderSlides.map(item => (
    <Tab
      label={item.title}
      key={item.index}
      component={Link}
      to={item.path}
    />
  ))
}

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