出现react/jsx-no-duplicate-props:No duplicate props allowed报错如何解决

react/jsx-no-duplicate-props 是ESLint的React语法校验规则，禁止在同一个JSX元素上声明重复属性，避免出现非预期的属性覆盖问题。
你提供的代码中，Grid item 所在行重复声明了两次xs属性，是触发报错的直接原因：

<Grid item xs={12} xs={12} md={4} >

• 定位报错指向的JSX标签，逐一核对所有传入的属性名，找出名称完全重复的属性
• 若存在大小写拼写不同但实际指向同一属性的情况（比如className和classname），也需要统一修正，避免运行时出现异常

直接删除重复的xs={12}即可，修正后的代码如下：

<Grid container spacing={3} className='centerd-text' >
     <Grid item xs={12} md={4} >
          <img src={img01} alt="img" />
    </Grid>
</Grid>

如果需要配置不同断点下的Grid尺寸，确保每个断点属性（xs/sm/md/lg/xl）仅声明一次即可。

内容的提问来源于stack exchange，提问作者chelsey lee