JSX三元条件内嵌套map渲染出现': expected'报错怎么解决

云上老周

2026-10-7

报错原因

JSX中三元运算符的真值分支只能返回单个根节点，你直接在分类ListItem后拼接map生成的列表项数组，相当于真值分支同时返回了两个独立的JSX节点，语法解析时会认为三元的真值分支已经在</ListItem>处结束，后续找不到对应的:分隔符就抛出了异常。

解决方法

用React Fragment（短语法为<>...</>）将三元真值分支内的所有内容包裹为单个根节点即可，修改后的代码如下：

{finishedTodos
? 
  <>
    <ListItem button divider className={classes.finishCategory} >
      <ArrowForward className={classes.checkIcon} />
      <ListItemText primary={`Finished      ${finishedTodos.length}`}  style={{color:"tomato"}}/>
    </ListItem>
    {finishedTodos.map((todo) =>(     
      <ListItem button divider key={todo.id}> {/* 注意给map生成的列表元素加唯一key，无id可临时用索引代替 */}
        <CheckCircle className={classes.checkIcon} />
        <ListItemText primary={todo.title} style={{textDecoration:"line-through",color:"gray"}} />
      </ListItem>
    ))}
  </>
: null }