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

IT技术 reactjs label
2021-04-03 07:49:16

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

例如，使用了以下 JSX：

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

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

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

我究竟做错了什么？

6个回答

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

如果你有一个label元素（如返回document.createElement，document.getElementById等），你访问它的for财产label.htmlFor。
2021-05-25 07:49:16
@BenAlpert 感谢您对此进行说明。我从来不看 DOM API 因为 jQuery 和东西（请原谅我）。但如果其他人有兴趣了解更多信息，请查看developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement。
2021-05-26 07:49:16
谢谢本。你能解释一下“为了与 DOM API 保持一致”吗？
2021-06-06 07:49:16
没关系，我在这里找到了答案。他们说要使用 ID 生成器。
2021-06-12 07:49:16
@Meglio 在 HTML 中，您需要一个 ID 才能使 for 属性工作。为了使您的组件可重用，您可以向组件添加一个 name 属性，该属性设置为 ID 和实际输入字段上的 name 属性。
2021-06-13 07:49:16

是的，为了react，

for 变成 htmlFor

class 变成 className

等等。

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

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

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

class -> className

使用和

for -> htmlFor

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

双方for并class在JavaScript中的保留字，这就是为什么当它涉及到HTML中JSX属性，你需要使用别的东西，做出react的团队决定使用htmlFor和className分别

那完全没有关系。JSX 转换可以将其转换为对属性名称也有效的“类”。实际上，在 Preact 中，您可以同时使用 class 和 className。
2021-05-26 07:49:16
@MalteR 你可以告诉 IE8、IE7 和 IE6
2021-05-30 07:49:16
虽然 React 可以在 JSX 中转换它，但它没有。他们的文档（截至 2020 年 3 月 25 日）声明“由于for是 JavaScript 中的保留字，因此使用 React 元素htmlFor代替。”：reactjs.org/docs/dom-elements.html#htmlfor
2021-06-15 07:49:16
其它你可能感兴趣的问题
上一篇通过 React-Router v4 <Link /> 传递值 下一篇如何在 React Redux 中访问存储状态？