为什么不同元素使用相同ID直接写React代码报错，通过组件渲染却正常？

首先明确两个基础前提：

• HTML规范中重复ID属于语义层面的不规范，不属于语法错误：浏览器本身不会因为DOM存在重复ID抛出执行错误，仅会导致document.getElementById()、CSS ID选择器等依赖ID的API出现非预期行为。你看到的报错是React开发模式下内置的静态校验规则抛出的，生产模式下React不会做这类校验，两种写法都不会触发报错。
• React开发模式的重复ID校验范围仅为单个组件内部返回的JSX元素，不会跨组件、跨实例校验最终渲染到DOM的ID是否重复。

对应两种场景的表现原因如下：

1. 直接在Main组件内写两个相同ID的img
   两个img都属于Main组件返回的JSX内容，React扫描同一份JSX时检测到重复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>
  )
}

2. 封装成Image组件后多次调用不报错
   每个独立的Image组件内部返回的JSX中仅存在一个id为image的元素，单个组件的校验完全通过。React不会跨多个Image组件实例，去校验最终渲染到DOM的ID是否重复，因此不会触发报错，对应代码：

export 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>
    )
}

注意：这种写法虽然不会触发React报错，但最终渲染到页面的DOM依然存在重复ID的问题，不符合HTML规范，也会导致ID相关的DOM API行为异常。建议通过props传入唯一标识、或者用React内置的useId()钩子生成唯一ID来避免这类问题。

内容的提问来源于stack exchange，提问作者mohammad ismael