React 警告 Invalid DOM property for

要修复 React.js 警告“Invalid DOM property for。Did you mean htmlFor”,需要在标签标签上使用 htmlFor 属性而不是 for。 使用 htmlFor 属性是因为 for 是 JavaScript 中的保留字。

React 警告 Invalid DOM property for

下面是一个产生上面警告的示例。

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 标签与 input 匹配,但 for 是 JavaScript 中的保留字。

为了消除警告,我们必须使用 htmlFor 而不是 for。如下代码所示

export default function App() {
  return (
    <div>
      <label htmlFor="firstName">First Name</label>
      <input id="firstName" type="text" />
    </div>
  );
}

htmlFor 属性不是 React.js 特有的,它也用于浏览器中以编程方式设置 for 属性。

如果我们有一些可访问性 linting 规则,可能必须用我们的 label 包装我们的 input 标签。

export default function App() {
  return (
    <div>
      <label htmlFor="firstName">
        First Name
        <input id="firstName" type="text" />
      </label>
    </div>
  );
}

我们必须在 React 中使用 htmlFor 的原因是因为 for 关键字是一个保留字 – 它用于 for 循环。

这也是使用 className 属性而不是 class 的原因。 class 这个词是保留的,因为它被用来声明一个 ES6 类。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React 警告 Invalid DOM property for