React项目报错：img为void元素标签，不可含子元素或用dangerouslySetInnerHTML

这个错误的核心是：HTML里的<img>是空标签（void element），绝对不能包含子节点，也不能使用dangerouslySetInnerHTML属性。

你贴的代码里的<img>写法是合规的，问题大概率出在你的自定义组件 <CustomMenu> 或者 <CustomClose> 内部——这两个组件里肯定存在不符合规范的<img>用法。

排查和修复步骤： #

• 打开CustomMenu.js和CustomClose.js文件，定位里面的<img>标签
• 确保所有<img>都采用自闭合写法（比如<img src="xxx" alt="xxx" />），禁止写成<img>...</img>这种带闭合标签的形式
• 检查这些<img>是否使用了dangerouslySetInnerHTML属性，如有直接删除该属性

错误示例（需避免）： #

// 错误：给img添加了子内容
<img src="/menu-icon.svg">菜单</img>

// 错误：使用了dangerouslySetInnerHTML
<img src="/close-icon.svg" dangerouslySetInnerHTML={{__html: ''}} />

正确示例： #

// 合规的img写法
<img src="/menu-icon.svg" alt="菜单图标" />

<img src="/close-icon.svg" alt="关闭按钮" />

另外，重新安装node_modules对这个问题无效，因为这是代码语法规范问题，和依赖包无关。如果排查完自定义组件仍未解决，可全局搜索项目中所有<img>标签，逐一检查是否符合规范。

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