React DOM 中的 ID 应该是唯一的吗？

Question

我对 React 相当陌生，但想知道适用于常规 DOM 的相同限制是否也适用于 React DOM，在本例中是 HTML 元素 ID 的唯一性。我之所以这么问，是因为在我目前正在使用的代码中，我发现了一个复选框组件，该组件将 ID 作为属性并将其设置在子元素上。虽然这只会在实际 DOM 中渲染一个具有 ID 的元素，但在 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

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

• 如果您id因为想要进行样式化而使用该属性，那么您应该使用class属性。
• 如果您使用id属性作为连接函数onSubmit或 的引用onChange，那么您应该使用name属性。

不过，我发现了一篇相关的帖子，可能会帮助您通过评论获得更好的理解。

className 属性是否承担 Reactjs 中 id 属性的角色？