React中同名元素是否会引发问题或属于不良实践？

嘿，这个问题问得很实在！先给你明确结论：从技术层面来说，React和原生HTML都允许元素拥有相同的name属性，但是否是不良实践得看具体场景。下面给你拆解清楚：

1. 先搞懂HTML里name属性的本质 #

HTML本身并不禁止重复的name属性——甚至在某些场景下，重复name是标准操作！比如表单里的复选框组：

<input type="checkbox" name="hobbies" value="reading">阅读
<input type="checkbox" name="hobbies" value="coding">编程

当提交表单时，后端会收到一个hobbies数组，包含所有选中的值，这完全是合理且推荐的用法。

2. React中的表现：和原生一致，但要注意受控组件的坑 #

React对name属性的处理和原生HTML没有区别，不会因为重复name报错，但如果你用受控组件绑定state，就要小心逻辑冲突了：
比如你的示例代码如果改成受控组件：

class App extends Component {
  state = { ID: '' };
  
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  render(){
    return (
      <div className="App">
        <input name="ID" id="order-ID" type="text" value={this.state.ID} onChange={this.handleChange} />
        <input name="ID" id="products-ID" type="text" value={this.state.ID} onChange={this.handleChange} />
      </div>
    )
  }
}

这时候两个输入框会共享同一个ID state，输入其中一个，另一个也会同步变化——这大概率不是你想要的效果，所以这种场景下重复name就会引发问题。

如果是非受控组件，用ref获取值的话，只要每个input的ref是唯一的，技术上不会有问题，但如果通过document.getElementsByName('ID')获取元素，拿到的是一个DOM集合，需要遍历区分，这在React里其实不是推荐的做法（React更建议用ref或者受控组件）。

3. 是否属于不良实践？分场景判断 #

• ✅ 合理场景：当你需要提交一组同类型的值（比如复选框、多选下拉菜单），重复name是标准且推荐的做法，完全没问题。
• ❌ 不推荐场景：像你示例里的两个独立输入框（分别对应订单ID和商品ID），重复name就属于不良实践了：
  • 会增加代码维护成本，其他开发者看到两个name相同的输入框会疑惑其用途；
  • 提交表单时，后端可能只会收到最后一个输入框的值（不同浏览器行为可能有差异），导致数据错误；
  • 后续做表单验证、数据处理时，容易出现逻辑混淆。

给你的示例代码的建议 #

把两个input的name改成更具语义化的唯一值，比如：

<input name="orderID" id="order-ID" type="text" />
<input name="productsID" id="products-ID" type="text" />

这样不管是表单提交、受控组件绑定还是后期维护，都会清晰很多。

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