【问题标题】：React ignores 'for' attribute of the label elementReact 忽略标签元素的“for”属性
【发布时间】：2014-05-10 05:36:39
【问题描述】：

在 React（Facebook 的框架）中，我需要使用标准的 for 属性呈现绑定到文本输入的标签元素。

例如使用以下 JSX：

<label for="test">Test</label>
<input type="text" id="test" />

但是，这会导致 HTML 缺少必需的（和标准的）for 属性：

<label>Test</label>
<input type="text" id="test">

我做错了什么？

【问题讨论】：

【解决方案1】：

是的，对于反应，

for 变为 htmlFor

class 变为 className

等等。

在此处查看如何更改 HTML 属性的完整列表：

【讨论】：

【解决方案2】：

for 和 class 都是 JavaScript 中的保留字，这就是为什么当涉及到 JSX 中的 HTML 属性时你需要使用其他东西，React 团队决定分别使用 htmlFor 和 className

【讨论】：

这与那绝对无关。 JSX 转换可以将其转换为对属性名称也有效的“类”。事实上，在 Preact 中，你可以同时使用 class 和 className。
虽然 React 可以在 JSX 中转换它，但它不能。他们的文档（截至 2020 年 3 月 25 日）声明“由于 for 是 JavaScript 中的保留字，React 元素使用 htmlFor 代替。”：reactjs.org/docs/dom-elements.html#htmlfor
@MalteR 你可以告诉 IE8、IE7 和 IE6

【解决方案3】：

JSX中就是htmlFor，JSX中class是className

【讨论】：

【解决方案4】：

只需使用 react `htmlFor` 替换 `for`！

您可以通过以下链接找到更多信息。

【讨论】：

【解决方案5】：

对于 React，您必须使用它的自定义关键字来定义 html 属性。

class -> className

被使用并且

for -> htmlFor

使用，因为 react 区分大小写，请确保您必须根据需要遵循 small 和 capital。

【讨论】：

【解决方案6】：

for 属性称为htmlFor 是为了与 DOM 属性 API 保持一致。如果您使用的是 React 的开发版本，您应该已经在控制台中看到了关于此的警告。

【讨论】：

谢谢本。你能为我解释一下“为了与 DOM API 保持一致”吗？
如果您有一个label 元素（由document.createElement、document.getElementById 等返回），您可以将其for 属性作为label.htmlFor 访问。
@Meglio 在 HTML 中，您需要一个 ID 才能使 for 属性起作用。为了使您的组件可重用，您可以将 name 属性添加到您设置为 ID 的组件中，并在实际输入字段中作为 name 属性。
没关系，我找到了答案here。他们说要使用 ID 生成器。
@BenAlpert 感谢您阐明这一点。由于 jQuery 和其他东西，我从来没有看过 DOM API（请原谅我）。但如果其他人有兴趣了解更多相关信息，请查看developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement。

只需使用 react htmlFor 替换 for！