Javascript ID在DOM中应该是唯一的吗？_Javascript_Reactjs

Javascript ID在DOM中应该是唯一的吗？

javascript reactjs

Javascript ID在DOM中应该是唯一的吗？,javascript,reactjs,Javascript,Reactjs,我对React还相当陌生，但我想知道适用于常规DOM的相同限制是否也适用于React DOM，在本例中是HTML元素ID的唯一性。我这样问是因为在我目前使用的代码中，我发现了一个复选框组件，它将ID作为属性，并将其设置在子元素上。虽然这将仅在实际DOM中呈现一个ID为的元素，但在React DOM中现在将有两个ID为的元素，组件本身将在子元素之外拥有它 const Checkbox = ({ label, name, id, allowLabelHtml = false, c

我对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>
);

const复选框=({
标签，
名称
身份证件
allowLabelHtml=false，
选中=错误，
className=“checkbox元素”，
onCheck=（）=>{}，
onUncheck=（）=>{}，
onChange=value=>（值？onCheck（）：onUncheck（）），
onBlur=（）=>{}，
labelClass=“”
}) => (
onChange（！checked）}
checked={checked}
onBlur={onBlur}
/>
{label！==null&&(
{label}
)}
);

这里还有一个针对chrome DOM explorer的React开发者工具的屏幕截图

在react中，我们很少在组件上使用Ids属性。请注意，React DOM在高级别上是否接受重复id；该页面仍将呈现为html页面，因为浏览器只理解html。而

复选框

组件可能被呈现为一个

div

，该div仍然具有与输入元素相同的id。所以我的建议是

如果因为要进行样式设置而使用
```
id
```
属性，则应使用
```
class
```
属性
如果使用
```
id
```
属性作为引用来连接函数
```
onSubmit
```
或
```
onChange
```
，则应使用
```
名称
```
属性

然而，我发现一个相关的帖子可能会帮助你通过评论获得更好的理解

在react中，我们很少在组件上使用Ids属性。请注意，React DOM在高级别上是否接受重复id；该页面仍将呈现为html页面，因为浏览器只理解html。而

复选框

组件可能被呈现为一个

div

，该div仍然具有与输入元素相同的id。所以我的建议是

如果因为要进行样式设置而使用
```
id
```
属性，则应使用
```
class
```
属性
如果使用
```
id
```
属性作为引用来连接函数
```
onSubmit
```
或
```
onChange
```
，则应使用
```
名称
```
属性

然而，我发现一个相关的帖子可能会帮助你通过评论获得更好的理解

这与HTML相同，从技术上讲，您可以拥有多个具有相同ID的元素，这只意味着如果您尝试获取/操作具有该ID的元素，它将获取第一个元素，而忽略其余元素。这可能会导致奇怪的行为错误。因此，基本上，当它仍然呈现时，你不应该有重复的ID。除了@Jayce444所说的之外，唯一ID也是一些可访问性审计的检查表项目，因此如果这是你要处理的或将来可能要处理的事情，保持它们的唯一性也是有意义的。如果您确实使用了非唯一ID，请确保团队中可能需要知道的任何其他人都知道（例如，测试人员或分析人员可能期望/依赖他们的唯一性，如果突然出现重复项，他们的工具就会出错）@Jayce444通过这种方式从React DOM中获取元素或直接与之交互是常见的吗？不，您不应该经常需要获取它们（React中有引用元素的引用），也不应该在React中直接操作DOM。这与HTML相同，从技术上讲，您可以有多个具有相同ID的元素，这只是意味着，如果您尝试获取/操作具有该ID的元素，它将获取第一个元素并忽略其余元素。这可能会导致奇怪的行为错误。因此，基本上，当它仍然呈现时，你不应该有重复的ID。除了@Jayce444所说的之外，唯一ID也是一些可访问性审计的检查表项目，因此如果这是你要处理的或将来可能要处理的事情，保持它们的唯一性也是有意义的。如果您确实使用了非唯一ID，请确保团队中可能需要知道的任何其他人都知道（例如，测试人员或分析人员可能期望/依赖他们的唯一性，如果突然出现重复项，他们的工具就会出错）@Jayce444这样从React DOM中获取元素或直接与之交互是常见的吗？不，你不应该经常需要获取它们（React中有引用元素的引用），也不应该在React中直接操作DOM。嗯，我没有意识到复选框可能会被呈现为div，在这种情况下，不以这种方式使用id绝对有意义。似乎我有一些重构要做。我很高兴这个答案对你有所帮助。嗯，我没有意识到复选框可能会呈现为div，在这种情况下，不使用id绝对有意义。看来我有一些重构要做。我很高兴这个答案对你有所帮助。