Question

我的目标是有条件地将id添加到html元素。在JSX中，我有这样的难题，有条件地向html元素中添加一个id：

<SomeHTMLElement id={condition ? "someId" : ""} />

或

<SomeHTMLElement id={condition ? "someId" : null} />

哪种方法更适合HTML？默认为null还是""？

如果有另一种方法可以有条件地向HTML元素添加id，甚至不将id属性引入元素本身，那也很好。例如<HTMLElement id />或<HTMLElement id="" />或<HTMLElement id={null} />最好不要在那里有空的id属性，以便将其编译为<HTMLElement />

Answer 1

空ID属性是无效的做法，因为它们是无效的HTML。如果您在DOM中不需要ID属性，则根本不输出它。

以下HTML文档包含一个没有值的id属性和一个带有显式空字符串的id=""属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Empty ID validation test</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Empty ID validation test</h1>

    <p id>This paragraph has an id attribute without a value.</p>
    <p id="">This paragraph has an id attribute explicitly set to an empty string.</p>

  </body>
</html>

W3C验证器对此有两个不同的错误。

“元素id上的服装p的错误值：ID不能为空字符串。”在此示例中，对于两个id属性，验证器都会给出此错误。
“重复ID”。 ID必须是唯一的，但验证程序会认为id和id=""具有相同的值。

请注意，尽管实际上F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID，但重复的ID也是A级WCAG的明显失败（请参见this doesn't cause accessibility harm unless the ID is being referred to by an IDREF elsewhere）。

在JSX中，我相信将属性设置为null值（例如<HTMLElement id={null} />）是防止其出现在DOM中的简便方法。请注意，我在这里谈论的是实际DOM，而不是虚拟DOM。

空ID或空ID是否是HTML的良好做法？有条件地向HTML元素添加ID

1 个答案: