迹忆客 专注技术分享

要修复 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 中的保留字。

要消除警告，我们必须使用 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 这个词是保留的，因为它用于声明 ES6 类。