React 中的无效 DOM 属性“for”警告 [已解决]

作者

React 中的无效 DOM 属性for警告[已解决]

Invalid DOM property `for` warning in React [Solved]

要修复 React.js 警告“无效的 DOM 属性for。你的意思是
htmlFor”，请使用htmlForprop 而不是for在你的 label 标签上。使用
htmlForprop 是因为for它是 JavaScript 中的保留字。

无效的 dom 属性

这是警告如何引起的示例。

应用程序.js
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.

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

htmlFor

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

如果您有一些可访问性 linting 规则，您可能必须input用您的label.

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

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

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

–