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

【问题标题】：Should IDs be unique in the React DOM?ID 在 React DOM 中应该是唯一的吗？
【发布时间】：2018-06-22 05:38:35
【问题描述】：

我对 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 explorer 的 React 开发者工具的截图

【问题讨论】：

它和 HTML 一样，你可以技术上拥有多个具有相同 ID 的元素，这只是意味着如果你尝试获取/操作具有该 ID 的元素，它将获取第一个并忽略其余的。这可能导致奇怪的行为错误。所以基本上，虽然它仍在渲染，但你不应该有重复的 ID。
只是补充一下@Jayce444 所说的，唯一 ID 也是一些可访问性审核的清单项目，所以如果这是您处理或可能希望在未来处理的事情，这也是有道理的以保持它们的独特性。如果您确实继续使用非唯一 ID，请确保团队中可能需要知道的其他任何人都知道（例如，测试人员或分析人员可能期望/依赖他们的唯一性如果突然出现重复，他们的工具就会跳闸）。
@Jayce444 以这种方式从 React DOM 获取元素或直接与 React DOM 交互是否常见？
不，你不应该经常需要获取它们（React 中有用于引用元素的 refs）并且你应该永远直接在 React 中操作 DOM。

标签： javascript reactjs

【解决方案1】：

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

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

但是我发现了一个相关的帖子，可能会帮助您通过 cmets 获得更好的理解。

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

【讨论】：

嗯，我没有意识到 Checkbox 可能会呈现为 div，在这种情况下，不以这种方式使用 id 绝对有意义。看来我有一些重构要做。
我很高兴这个答案对你有所帮助。