不同元素的相同 id 奇怪地在反应中起作用？

Question

众所周知，您不能对 HTML 中的不同元素使用相同的 ID，例如：

import img1 from './images/img1.png'
import img2 from './images/img2.png'
export const Main =()=>{
  return (
    <div>
      <img src={img1} id="image"/> 
      <img src={img2} id ="image"/>
    </div>
  )
}

会引发错误，但是当我使用 React 组件渲染图像元素时，它可以正常工作：

exort const Image =(props)=>{
    return (
      <img src={props.src} id="image"/>
    )
}
import img1 from './images/img1.png'
import img2 from './images/img2.png'
import Image from './image'
const Main =()=>{
    return (
      <div>
        <Image src={img1} />
        <Image src={img2}/>
      </div>
    )
}

有什么解释吗？

Answer 1

我认为 React 不会因对多个元素使用相同的 id 而引发错误。它只是发出警告。在高级别上，页面呈现为 HTML，因此您的代码可以正常运行。

不同元素的相同 id 奇怪地在反应中起作用？

same id for different elements strangely worked in react?

html

javascript

css

components

reactjs