为什么我们在 ReactJS 的 <img/> 标签之间添加任何标签时会出错？答案

【问题标题】：Why we get error when we add any tag in between <img/> tag in ReactJS?为什么我们在 ReactJS 的 <img/> 标签之间添加任何标签时会出错？
【发布时间】：2021-04-19 17:58:14
【问题描述】：

我在 img 标签之间添加了 span 标签，所以它会报错请解释为什么会报错。究竟是什么问题...

<img src="any demo images here" alt="Nadeem">
                <span>adeem</span>
</img>

【问题讨论】：

因为img 是一个自关闭标签，你不能给子元素自关闭元素，它不仅适用于反应，而且适用于整个html

标签： reactjs react-redux react-hooks custom-error-handling

【解决方案1】：

原因是img标签不能有任何子元素。

要获得您正在寻找的结果，您可能需要像这样将 img 和 span 包装在包装器 div 中。

<div style={{position: "relative"}} />
    <img src="any demo images here" alt="Nadeem">   
    <span style={{position:"absolute", bottom: "0px", margin: "0px auth"}}>adeem</span> 
</div>

（我不确定这是否是您正在寻找的东西，但从您的问题中假设是这样）

【讨论】：

当我们编写这些代码而不是仅在 HTML 中做出反应时，它的工作原理请帮助我为什么它在 React 中不起作用。如果 img 是自闭合标签，那么为什么它在纯 HTML 中工作。Nadeem
@Nadeem Khan 它在纯 HTML 中工作的原因是因为浏览器有时会忽略不兼容的 HTML 并决定如何处理它，但是反应编译器会抛出错误，因为它是错误的，请参阅我更新的答案，了解您可能想要使用的解决方案。（PS 即使它不会在纯 HTML 中抛出错误，但仍然容易引入错误）
伟人感谢 Shmili Breuer 先生
如果对您有帮助，请考虑将答案标记为已接受的答案，以帮助将来有相同问题的人。