tabIndex=-1是否等同于未设置该属性？React中应使用undefined还是null？

1. tabIndex=-1 和未设置该属性是否等效？ #

不等效，二者行为有明确差异：

• 未设置tabIndex的元素，聚焦行为完全遵循元素默认规则：
  • 原生可交互元素（button、a、输入框等）默认支持Tab键导航聚焦，也支持JS主动调用focus()聚焦
  • 普通非交互元素（div、span等）默认既无法通过Tab键选中，也不支持JS主动聚焦
• 设置了tabIndex=-1的元素：
  • 无论元素类型，都支持JS主动调用focus()方法聚焦
  • 无论元素类型，都不会进入Tab键导航序列，无法通过键盘Tab选中

2. 不需要tabIndex时应该赋值undefined还是null？ #

你应该赋值为undefined：

• React的属性渲染逻辑规定：如果属性值为undefined，React会直接省略该属性，最终DOM上的元素完全不会携带tabIndex，和原生未写该属性的效果完全一致，符合你的需求
• 如果赋值为null，React仍然会在DOM上渲染tabIndex="null"，部分浏览器会将其识别为非法值甚至误判为tabIndex=0，会出现不符合预期的聚焦行为

React实现示例 #

// 动态控制tabIndex的通用组件示例
function CommonComponent({ enableTabFocus }) {
  return (
    <div 
      {/* 不需要tabIndex时直接传undefined即可 */}
      tabIndex={enableTabFocus ? 0 : undefined}
    >
      组件内容
    </div>
  )
}

内容的提问来源于stack exchange，提问作者j obe