注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
在React中,当我们需要为一个表单元素设置标签时,可以使用htmlFor属性。它与HTML中的for属性相似,但因为for是JavaScript的关键字,所以React使用htmlFor代替。htmlFor的作用是将标签与相应的表单元素关联起来,从而使浏览器知道该标签与哪个输入框匹配。在单页应用程序中,使用htmlFor属性可以让我们获得更好的可维护性和可读性。
用法
import React from 'react';
import ReactDOM from 'react-dom';
let names = ['张三','李四','王五'];ReactDOM.render(<form><label htmlfor="username">用户名</label><input id="username"></input></form>,document.getElementById('root')
);
上述代码中,label元素与input元素实现关联唯一的方式是把label的for属性的值设置为input的id属性的值。但是在React中,为了避免使用for关键字,需要使用htmlFor属性替代原先的for。