React忽略'label元素的属性

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

例如，使用以下JSX:

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

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

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

我做错了什么?

241654 次浏览

小开

最佳答案

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

小开

是的，对于react，

for变成htmlFor

class变成className

等。

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

小开

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

__abc0 -> __abc1

使用和

__abc0 -> __abc1

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

小开

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

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

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

小开

在JSX中是htmlFor, class在JSX中是className

小开

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