React开发Tabs组件时如何动态添加class类与aria-hidden属性？

实现方案 #

你可以通过React.cloneElement方法修改子Tab元素的属性和类名，按以下步骤修改即可：

1. 改造getTabs函数逻辑

不需要把Tab拆分为可见、隐藏两个独立数组，直接在遍历的时候给每个Tab元素添加对应的类和ARIA属性：

const getTabs = () => {
  const { blockWidth, tabsTotalWidth, tabDimensions, showMoreWidth } = state;
  let availableWidth = blockWidth - showMoreWidth;

  return children.map((tabItem, index) => {
    const { key = index, className: originalClass = "" } = tabItem.props;
    const tabWidth = tabDimensions[key]?.width || 0;
    const isHidden = tabWidth >= 45;

    // 拼接类名，原有类名保留
    const finalClass = isHidden 
      ? `${originalClass} hidden`.trim()
      : originalClass.replace(/\bhidden\b/g, "").trim();

    // 克隆元素并更新属性
    return React.cloneElement(tabItem, {
      className: finalClass,
      "aria-hidden": isHidden
    });
  });
};

2. 简化渲染逻辑

直接渲染getTabs返回的处理完成的Tab数组即可：

const processedTabs = getTabs();

return (
  <ul ref={tabsRef} className="rc64nav">
    {processedTabs}
  </ul>
);

3. 补充注意事项

• 确保tabDimensions的宽度计算是在DOM渲染完成后触发的，建议在组件挂载、窗口resize、数据源变化时重新计算每个Tab的实际宽度，更新state后触发重新渲染。
• 如果你的hidden类是display: none实现的，要注意隐藏的Tab不会被屏幕阅读器识别，符合aria-hidden=true的语义。

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