React项目img标签行报Unexpected token语法错误是什么原因？

• 代码中map回调使用小括号做隐式返回时，同时包含了<img>标签和后续的{" "}空白文本两个并列的根节点，JSX不支持隐式返回多个未包裹的根节点，语法解析时会误认为你在编写数组元素，因此抛出「期望逗号分隔」的语法错误。
• 代码中多处手动插入的{" "}空白占位属于冗余写法，元素间距可以直接通过CSS实现，完全不需要用这种方式处理。

方案1（更推荐）：删除冗余空白占位 #

直接删掉所有多余的{" "}，同时给遍历生成的img标签添加必填的key属性（避免后续出现运行时警告），修复后代码如下：

import React, { useState } from "react";
import images from "./api-mock.json";

function App() {
  const [imageList, setImageList] = useState(images.resources);
  return (
    <div className="image-grid">
      {imageList.map((image) => (
        <img key={image.public_id} src={image.url} alt={image.public_id}/>
      ))}
    </div>
  );
}
export default App;

方案2：保留空白占位的写法 #

如果确实需要保留空白占位，需要将多个返回节点用React.Fragment包裹：

import React, { useState, Fragment } from "react";
import images from "./api-mock.json";

function App() {
  const [imageList, setImageList] = useState(images.resources);
  return (
    <div className="image-grid">
      {imageList.map((image) => (
        <Fragment key={image.public_id}>
          <img src={image.url} alt={image.public_id}/>
          {" "}
        </Fragment>
      ))}
    </div>
  );
}
export default App;

注意：需要加key属性时不能使用Fragment的简写语法<></>，必须使用完整的Fragment标签挂载key。

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