ReactJS中如何为Material UI Tabs对应父div的子节点添加tabindex属性

你原来的代码出错是因为MUI Tabs组件的渲染结构是多层嵌套的，你绑定事件的tabSec容器的直接子节点并不是Tab对应的button元素，中间还嵌套了.MuiTabs-flexContainer等层级，所以直接遍历childNodes会把属性加到错误的元素上。

该需求在MUI + React的项目中完全可以实现，两种实现方案如下：

方案1：使用MUI Tab组件原生属性（最推荐） #

MUI的Tab组件支持直接透传tabIndex属性到渲染生成的button元素上，你只需要根据当前选中的value动态赋值即可，完全不需要编写DOM操作逻辑：

<Tabs value={value} id="tabSec">
  <Tab
    tabIndex={value === 0 ? 0 : -1}
    label={
      <span className={value === 0 ? "active-tab" : "custom-style-on-tab"}>
        ABC
      </span>
    }
  />

  <Tab
    tabIndex={value === 1 ? 0 : -1}
    label={
      <span className={value === 1 ? "active-tab" : "custom-style-on-tab"}>
        XYZ
      </span>
    }
  />
</Tabs>

这个方案性能更优，也符合React的声明式开发规范，不会因为MUI版本调整DOM结构导致逻辑失效。

方案2：修正原有DOM操作逻辑 #

如果你确实需要保留自定义的键盘事件逻辑，只需要调整选择Tab按钮的选择器即可，直接匹配所有Tab对应的button元素：

const tabRoving = (element) => {
  if (!element) return;
  const handleKeydown = (e) => {
    if (e.keyCode === 13) {
      if (element.contains(document.activeElement)) {
        // 直接匹配所有Tab按钮，忽略嵌套层级
        const tabButtons = element.querySelectorAll('button[role="tab"]');
        tabButtons.forEach((btn) => {
          btn.setAttribute("tabindex", btn === document.activeElement ? "0" : "-1");
        });
      }
    }
  };
  element.addEventListener("keydown", handleKeydown);
  // 返回清理函数，避免内存泄漏
  return () => element.removeEventListener("keydown", handleKeydown);
};

useEffect(() => {
  const clearEvent = tabRoving(document.getElementById("tabSec"));
  return clearEvent;
}, []);

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