解决React中Invalid DOM property `for` 警告
要修复 React.js 警告“Invalid DOM property for. Did you mean tmlFor“。 使用 htmlFor 属性是因为 for 是 JavaScript 中的保留字。
下面是警告如何产生的示例。
export default function App() {
// ⛔️ Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
return (
<div>
<label for="firstName">First Name</label>
<input id="firstName" type="text" />
</div>
);
}
代码示例中的问题是我们使用 for 属性将 label 标记与输入匹配,但是 for 是 JavaScript 中的保留字。
export default function App() {
return (
<div>
<label htmlFor="firstName">First Name</label>
<input id="firstName" type="text" />
</div>
);
}
htmlFor 属性不是 React.js 特有的,它也在浏览器中用于以编程方式设置 for 属性。
export default function App() {
return (
<div>
<label htmlFor="firstName">
First Name
<input id="firstName" type="text" />
</label>
</div>
);
}
我们必须在 React 中使用 htmlFor 的原因是因为 for 关键字是一个保留字 – 它用于 for 循环。
这也是使用 className 属性而不是类的原因。 class 这个词是保留的,因为它用于声明 ES6 类。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。