JSX嵌入JavaScript报错：label被编辑器标红的原因排查

你的代码里label标红是JSX的JavaScript表达式语法错误，具体问题出在这一行：

{mode == "new" && (<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />) label}

错误原因 #

在JSX的{}表达式里，逻辑与&&执行完图标组件的渲染后，你直接写了label，这不符合JavaScript语法——两个表达式之间没有合法分隔符，也没有被包裹在正确的结构里，相当于写了true && <组件> label，解析器会判定这是无效语法。

修复方案 #

你想要的效果应该是当mode === "new"时，同时渲染图标和label，可以用以下两种方式：

1. 用React.Fragment短语法包裹多个元素（推荐）

const ModalButton = ({ label, mode }) => {
  return (
    <button type="submit">
      {mode === "new" && (
        <>
          <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />
          {label}
        </>
      )}
    </button>
  );
};

用<>（Fragment短语法）把图标和label包裹成一个整体，确保&&后面是一个合法的JSX元素，同时不会额外生成DOM节点。

2. 用逗号运算符（可读性差，不推荐）

const ModalButton = ({ label, mode }) => {
  return (
    <button type="submit">
      {mode === "new" && (<FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />, label)}
    </button>
  );
};

逗号运算符会返回最后一个表达式的值，但这种写法可读性低，仅作语法层面的补充说明。

另外建议把==换成严格相等的===，避免隐式类型转换带来的潜在问题。

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