React忽略label元素的'for'属性

Question

在React(Facebook的框架)中,我需要使用标准for属性渲染绑定到文本输入的标签元素.

例如,使用以下JSX:

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

但是,这会导致HTML缺少必需(和标准)for属性:

<label data-reactid=".1.0.0">Test</label>
<input type="text" id="test" data-reactid=".1.0.1">

我究竟做错了什么？

Answer 1

for调用该属性htmlFor以与DOM属性API保持一致.如果您正在使用React的开发版本,那么您应该在控制台中看到有关此问题的警告.

如果你有一个`label`元素(由`document.createElement`,`document.getElementById`等返回)你将`for`属性作为`label.htmlFor`访问. (17认同)
@Meglio在HTML中,您需要一个ID才能使for属性起作用.要使组件可重用,可以在组件中添加名称属性,在实际输入字段中将其设置为ID和name属性. (3认同)
谢谢本。您能为我解释“与DOM API的一致性”吗？ (2认同)
没关系,我找到了答案[这里](https://groups.google.com/d/msg/reactjs/N-gDqH2LEcQ/bjBBTKSAZaYJ).他们说使用ID发生器. (2认同)
@BenAlpert感谢您对此有所了解.我从来没有看过DOM API因为jQuery和东西(请原谅我).但是如果其他人有兴趣了解更多相关信息,请查看https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement. (2认同)
我希望他们将其命名为“forName”，遵循“className”命名约定 (2认同)

Answer 2

只是用react`htmlFor`来替换`for`！

由于for是 JavaScript 中的保留关键字，React 元素使用htmlFor它来代替。

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

Answer 3

是的,为了反应,

for for htmlFor class成为className等.

请参阅此处更改HTML属性的完整列表:

Answer 4

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

虽然 React 可以在 JSX 中转换它，但事实并非如此。他们的文档（截至 2020 年 3 月 25 日）声明“由于 `for` 是 JavaScript 中的保留字，React 元素使用 `htmlFor` 代替。”：https://reactjs.org/docs/dom-elements.html# htmlfor (7认同)

Answer 5

对于React,您必须使用它的per-define关键字来定义html属性.

class - > className

使用和

for - > htmlFor

使用,因为反应是区分大小写,请确保您必须按照要求遵循小额和资本.