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

Posted 2023-02-23

【中文标题】不同元素的相同ID奇怪地在反应中起作用？

【英文标题】：same id for different elements strangely worked in react?

【发布时间】：2021-08-21 11:33:37

【问题描述】：

众所周知，您不能对 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>
    )

请解释一下？

【问题讨论】：

ID 应该是唯一的，并且每页仅适用于一个元素。如果您需要共享 ID，请改用类 (css)。

“将引发错误” - 不，它不会引发错误。 ID应该是唯一的，但没有什么能阻止你多次使用同一个 ID。

那么，你的问题是为什么 react 没有“抓住”这个问题？

@evolutionxbox ，是的，我知道，我只是想知道如何在 React 中使用相同的 ID 而不会有任何问题

@Andreas ，实际上确实如此，但是当我使用上面显示的 React 组件时，它可以工作并且没有任何反应

【参考方案1】：

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