如何在React JSX中使用>？添加条件符号时遇持续解析错误

你的问题核心是在面包屑非最后一项后添加>分隔符，之前的解析错误通常是因为JSX语法使用不当，比如未正确处理多元素返回、条件表达式写法有误。以下是几种可行的写法：

方法一：用Fragment包裹多元素 #

{crumbs.map((item, idx) => (
  <React.Fragment key={item.href}>
    <Link href={item.href}>{item.label}</Link>
    {/* 注意是length-1，排除最后一项 */}
    {idx < crumbs.length - 1 && '>'}
  </React.Fragment>
))}

React.Fragment可以在不额外生成DOM节点的情况下返回多个元素，同时必须给每个循环项设置唯一key（这里用item.href作为唯一标识，也可以用idx但不推荐）。

方法二：返回元素数组 #

{crumbs.map((item, idx) => [
  <Link key={`crumb-link-${idx}`} href={item.href}>{item.label}</Link>,
  idx < crumbs.length - 1 && '>'
])}

直接返回数组时，数组内的每个元素都需要设置唯一key，这种写法更简洁，但要确保数组内的false值（当条件不满足时）会被React忽略渲染。

常见错误原因 #

1. 条件判断写错：你之前可能用了idx < crumbs.length，这会导致最后一项也添加分隔符，正确的条件应该是idx < crumbs.length - 1。
2. 未正确包裹多元素：JSX中一个函数组件/循环项只能返回单个根元素，要么用Fragment，要么用数组，否则会触发解析错误。
3. 分隔符写法问题：如果要渲染HTML实体>，可以直接写>，React会自动转义；如果一定要用实体，需要用{'>'}包裹成JSX表达式。

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