React 警告 Invalid DOM property for

React 1年前 71

要修复 React.js 警告“Invalid DOM property for。Did you mean htmlFor”，需要在标签标签上使用 htmlFor 属性而不是 for。使用 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 标签与 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>
  );
}