ID在React DOM中是唯一的吗？

Question

我对React相当新，但想知道适用于常规DOM的相同限制是否也适用于React DOM，在这种情况下是HTML元素ID的唯一性。我问，因为在我正在处理的代码中，我发现了一个复选框组件，它将ID作为属性并将其设置在子元素上。虽然这只会在具有ID的实际DOM中呈现一个元素，但在React DOM中现在将有两个带有ID的元素，除了子元素之外，组件本身也将拥有它。

const Checkbox = ({
  label,
  name,
  id,
  allowLabelHtml = false,
  checked = false,
  className = "checkbox-element",
  onCheck = () => {},
  onUncheck = () => {},
  onChange = value => (value ? onCheck() : onUncheck()),
  onBlur = () => {},
  labelClass = ""
}) => (
  <div className={className}>
    <input
      id={id}
      name={name}
      type="checkbox"
      className="standard-checkbox-style"
      onChange={() => onChange(!checked)}
      checked={checked}
      onBlur={onBlur}
    />
    {label !== null && (
      <label className={labelClass} htmlFor={name}>
        {label}
      </label>
    )}
  </div>
);

此处还有用于chrome DOM资源管理器事件的React开发人员工具的屏幕截图

Answer 1

在反应中，我们很少在组件上使用Ids属性。请注意，React DOM在高级别上是否接受重复的id;该页面仍将呈现为html页面，因为浏览器只能理解html。并且CheckBox组件可能会呈现为div，它仍然具有与input元素相同的id。 所以我的建议是，

• 如果您使用id属性，因为要进行样式设置，则应使用class属性。
• 如果您使用id属性作为参考来连接函数onSubmit或onChange，则应使用name属性。

然而，我发现了一篇相关文章，可能会帮助您通过评论获得更好的理解。

Does the className attribute take on the role of the id attribute in Reactjs?