警告：无效的 DOM 属性 `tabindex`。你的意思是“tabIndex”吗？答案

【问题标题】：Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?警告：无效的 DOM 属性 `tabindex`。你的意思是“tabIndex”吗？
【发布时间】：2020-04-16 16:35:57
【问题描述】：

我想在 react 中设置一个 tabindex，它给我一个警告 ：“警告：无效的 DOM 属性 tabindex。你的意思是 tabIndex？”。

我的代码是：

<Nav.Item key={label}>
      <Nav.Link tabindex={index+1} > Test  </Nav.Link>
</Nav.Item>

当我使用 tabIndex 时没有错误但它不工作当我像共享代码一样使用它时它工作但发出警告我想删除该警告。

【问题讨论】：

尝试通过添加+"" 将其转换为字符串并查看结果。我不确定...

标签： reactjs

【解决方案1】：

reactjs 中的属性遵循 camelCase。因此发出警告。并在<Nav.Item> 中使用tabIndex 而不是<Nav.Link>

<Nav.Item key={label} tabIndex=`${index+1}` >
      <Nav.Link> Test  </Nav.Link>
</Nav.Item>

查看https://codesandbox.io/s/billowing-sun-n969i

当您将tabIndex 与<Nav.Item> 一起使用时，它工作得非常好

【讨论】：

当我这样使用时没有错误，但它也不能正常工作
预期的行为是什么？
当您使用选项卡按钮处理应用程序时，它不起作用。我正在使用react-bootstrap.github.io/components/navs 组件其中没有tabIndex
查看沙盒

【解决方案2】：

Official React docs says

在 React 中，所有 DOM 属性和属性（包括事件处理程序）都应该是驼峰式。例如，HTML 属性 tabindex 对应于 React 中的属性 tabIndex。 aria-* 和 data-* 属性例外，它们应该小写。例如，您可以将 aria-label 保留为 aria-label。

React 中的所有 DOM 属性都应该是驼峰式。例如，

className="btn btn-primary" 而不是classname="btn btn-primary"。

在您的情况下，严格来说应该是 tabIndex 而不是 tabindex

【讨论】：