React忽略label元素的for属性

在React (Facebook的框架)，我需要渲染一个标签元素绑定到一个文本输入使用标准属性。

例如，使用以下JSX:

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

然而，这会导致HTML缺少必需的(和标准的)属性:

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

我做错了什么?

当前回答

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

类->类

使用和

> htmlFor

使用时，因为react是区分大小写的，请确保您必须按照要求遵循小和大写。

其他回答

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

是的，对于react，

for变成htmlFor

class变成className

等。

查看HTML属性如何改变的完整列表:

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

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

类->类

使用和

> htmlFor

使用时，因为react是区分大小写的，请确保您必须按照要求遵循小和大写。

只需使用react htmlFor替换for!

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

refs

你可以通过下面的链接找到更多信息。

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

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

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

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

推荐文章