React报错img为void元素不能有子元素或用dangerouslySetInnerHTML怎么办

报错原因 #

这个报错是因为 img 属于HTML中的空元素（void element），天生不支持包含任何子内容，也不能写成开闭配对的标签形式，只能使用自闭合写法。你当前的代码存在两个直接触发报错的问题：

• 用了 <img></img> 的配对标签写法
• 标签中间插入了 {" "} 空白字符作为子元素

你之前尝试自闭合标签没生效，大概率是没有同步删掉标签中间的空白子元素，或是热更新缓存残留导致的报错没有消失。

修复后的完整代码 #

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} key={image.public_id} />
      ))}
    </div>
  );
}
export default App;

额外注意点 #

• 除了img外，input、br、hr、meta等所有原生空元素在React中都必须使用自闭合写法，不能添加任何子内容（包括空格、注释都不允许写在标签内部）
• 上面的代码额外补充了key属性，是React列表渲染的必填项，避免触发列表项唯一性的相关警告
• 如果修改后依然报同样的错，重启本地开发服务清除热更新缓存即可。

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