React 忽略标签元素的“for”属性

reactjs label

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

例如，使用以下 JSX：

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

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

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

我究竟做错了什么？

Sophie Alpert

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

谢谢本。你能为我解释一下“为了与 DOM API 保持一致”吗？

如果您有一个 label 元素（由 document.createElement、document.getElementById 等返回），您可以将其 for 属性作为 label.htmlFor 访问。

@Meglio 在 HTML 中，您需要一个 ID 才能使 for 属性起作用。为了使您的组件可重用，您可以将名称属性添加到您设置为 ID 和实际输入字段上的名称属性的组件中。

没关系，我找到了答案 here。他们说要使用 ID 生成器。

@BenAlpert 感谢您对此有所了解。由于 jQuery 和其他东西，我从来没有看过 DOM API（请原谅我）。但如果其他人有兴趣了解更多相关信息，请查看 developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement。

Brad Turek

是的，为了反应，

for 变为 htmlFor

class 变为 className

等等

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

https://facebook.github.io/react/docs/dom-elements.html

Jani Devang

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

类->类名

被使用并且

对于 -> htmlFor

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

Trident D'Gao

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

xgqfrms

只是使用 react htmlFor 来替换 for！

因为 for 是 JavaScript 中的保留字，所以 React 元素使用 htmlFor 代替。

参考

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

https://facebook.github.io/react/docs/dom-elements.html#htmlfor

https://github.com/facebook/react/issues/8483

https://github.com/facebook/react/issues/1819

Daniel Nguyen

那是 JSX 中的 htmlFor 和 class 是 JSX 中的 className

React 忽略标签元素的“for”属性

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们