img 是一个 void 元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`

【问题标题】：img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`img 是一个 void 元素标签，不能有 `children` 也不能使用 `dangerouslySetInnerHTML`
【发布时间】：2021-09-04 12:31:44
【问题描述】：

我收到错误“*img 是一个空元素标签，不能有children，也不能使用dangerouslySetInnerHTML*。”我也尝试使用自动关闭标签 > 但它也不起作用

这是我的代码 App.js：

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 src={image.url} alt={image.public_id}>
          {" "}
        </img>
      ))}{" "}
    </div>
  );
}
export default App;

【问题讨论】：

标签： reactjs tags element children

【解决方案1】：

正如错误所说 - 你在 <img> 中放置了一个不应该的子节点。改变

    <img src={image.url} alt={image.public_id}>
      {" "}
    </img>

到

    <img src={image.url} alt={image.public_id} />

【讨论】：

是的，我试过了，但也没有用
它应该使您在问题中描述的错误消失。是否出现不同的错误？您确定保存了更改吗？
哦，是的，我又试了一次，void 元素错误消失了，但第 11 行出现了新错误，即“意外令牌，除外”、“
这意味着您在某处打错了字，但是您问题中的代码在语法上是正确的，而我的答案中的代码在语法上也是正确的。如果没有看到代码，就不可能说出问题所在 - 这也是一个与您原来的问题完全不同的问题。