ReactJS中使用map渲染多段JSX并结合includes时触发语法错误

看起来你是在尝试结合map渲染列表元素，同时根据列表是否包含特定值来显示对应内容，但代码的语法结构出了问题，才导致抛出"Unexpected token"的错误。

错误原因分析 #

你的代码里，list.map(...)的回调函数结束后没有正确闭合map的调用括号，就直接跟上了list.includes的判断逻辑，这让JS解析器无法识别正确的语法结构，自然会触发语法错误。

解决方案 #

根据你的需求，分两种常见场景给出修正代码：

场景1：如果列表包含"Test"，就在原列表渲染后额外添加替换文本

这种情况会保留原列表的所有元素，同时当列表里存在"Test"时，在末尾显示"Replacement"：

return (
  <>
    {list.length ? (
      <>
        {/* 渲染原列表的每个元素 */}
        {list.map((item, idx) => (
          <span key={idx}> {item} </span>
        ))}
        {/* 判断列表是否包含Test，是则显示替换文本 */}
        {list.includes("Test") && (
          <span key="test"> Replacement </span>
        )}
      </>
    ) : "-"}
  </>
);

场景2：将列表中的"Test"项直接替换为"Replacement"

如果你的需求是把列表里的"Test"文本直接替换成"Replacement"，而不是额外添加内容，那么可以在map的回调里直接做判断：

return (
  <>
    {list.length ? (
      list.map((item, idx) => (
        <span key={idx}>
          {/* 对单个元素做判断，替换指定文本 */}
          {item === "Test" ? "Replacement" : item}
        </span>
      ))
    ) : "-"}
  </>
);

关键修正点 #

• 确保map方法调用的括号正确闭合后，再添加其他JSX表达式
• 多个并列的JSX元素需要用<>（Fragment）包裹，或者放在同一个容器元素里

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