React 警告 Invalid DOM property for

当前位置：主页 > 学无止境 > WEB前端 > React >

Vue React JavaScript Angular CSS HTML

React 警告 Invalid DOM property for

作者：迹忆客最近更新：2022/08/03 浏览次数：

要修复 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 类。

上一篇：修复 React 中的 Parameter 'props' implicitly has 'any' type 错误

下一篇：解决 React 错误 JSX element type does not have any construct or call signatures

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

在 React 中循环遍历对象数组

发布时间：2023/03/18 浏览次数：124 分类：React

在 React 中循环对象数组：使用 map() 方法迭代数组。我们传递给 map() 的函数会为数组中的每个元素调用。该方法返回一个新数组，其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间：2023/03/18 浏览次数：162 分类：React

在 React 中使用 event.target 获取元素的类名获取元素的类名：将元素上的 onClick 属性设置为事件处理函数。访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间：2023/03/18 浏览次数：152 分类：React

使用更详细的片段语法将 key 属性添加到 React 片段，例如 React.Fragment key={key} 。更冗长的语法实现了相同的结果对元素列表进行分组，而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间：2023/03/15 浏览次数：203 分类：React

在 React 中删除事件监听器：在 useEffect 挂钩中添加事件侦听器。从 useEffect 挂钩返回一个函数。当组件卸载时，使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间：2023/03/15 浏览次数：198 分类：React

React 中在 map() 中使用条件：在数组上调用 map() 方法。使用 if 条件，如果条件满足则显式返回。否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

在 React 中调用多个 onClick 函数

发布时间：2023/03/15 浏览次数：160 分类：React

在 React 中调用多个 onClick 函数：在元素上设置 onClick 属性。在事件处理函数中调用其他函数。事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s

在 React 中按类名查找所有元素

发布时间：2023/03/15 浏览次数：171 分类：React

在 React 中通过 className 查找所有元素：使用 getElementsByClassName 方法获取具有特定类的所有元素。将对该方法的调用放在 useEffect() 钩子中。 import {useEffect} from react ; const App = () = { useEf

在 React 中检查元素是否获取到焦点

发布时间：2023/03/15 浏览次数：154 分类：React

要检查元素是否在 React 中获得焦点：在元素上设置 ref 属性。元素呈现后，检查元素是否是文档中的活动元素。如果是，则该元素被聚焦。 import {useEffect, useRef} from react ; export defaul

在 React 中悬停时显示元素或文本

发布时间：2023/03/13 浏览次数：160 分类：React

在 React 中悬停时显示元素或文本：在元素上设置 onMouseOver 和 onMouseOut 属性。跟踪用户是否将鼠标悬停在状态变量中的元素上。根据状态变量有条件地渲染另一个元素。 import {useStat

迹忆客专注技术分享