maxlength中l大小写的场景

Question

下面是maxlength在不同的场景应用的案例// html<input type="text" maxlength="10" id="demo">// 获取document.getElementById('demo').maxLength// 设置document.getElementById('demo').maxLength=20;// jQuery$('#demo').attr('maxlength');$('#demo').attr('maxlength', 20);//Nativedocument.getElementById('demo').setAttribute('maxlength', 20);问题一总结类似于maxlength这种存在不同环境大小写不同的其他属性问题二我对于maxlength应用场景总结是在js中用大写L其他直接操作html标签属性的用小写l不知道这个总结是否有问题，或者请表达自己的总结观点问题三扩展React<FInput   labelWidth={LABEL_W}   label="手机号码"   placeholder="请输入手机号码"   value={relaMobile&&relaMobile.replace(/[^\d]/g,'')}   maxLength = {11}/>上面为什么用大写L， 为什么用{}包着常量，直接等于不行吗？

Answer 1

问题的关键在于 html 标签及属性名是大小写不敏感的，所以理论上

<input type="text" maxlength="10" id="demo">

和

<INPUT TYPE="text" MAXLENGTH="10" ID="demo">

是没有差别的。

而 JavaScript 则是大小写敏感的，所以 DOM attributes 会使用驼峰形式，JSX 本质上是 JavaScript，所以也是大小写敏感的。