React如何通过Tab组件defaultTab属性设置TabContext默认activeTab值

问题根因 #

当前实现存在两个核心问题：

1. Tab组件的useEffect逻辑未判断activeTab是否已完成初始化，只要带defaultTab属性的Tab挂载就会强制覆盖activeTab值
2. 未做defaultTab数量校验，无法保证TabContainer下仅有一个默认Tab，易触发重复赋值导致状态异常

代码修改 #

1. 优化TabProvider（可选优化，避免不必要重渲染） #

用useCallback包裹toggleTab方法，保证函数引用稳定，减少Tab组件不必要的effect触发：

const TabContext = createContext();

export function useTab() {
  return useContext(TabContext);
}

const TabProvider = ({ children }) => {
  const [activeTab, setActiveTab] = useState();

  // 用useCallback包裹保证引用稳定
  const toggleTab = useCallback((title) => {
    setActiveTab(title);
  }, []);

  return (
    <TabContext.Provider value={[activeTab, toggleTab]}>
      {children}
    </TabContext.Provider>
  );
};

export default TabProvider;

2. 修改Tab组件逻辑 #

在useEffect中增加activeTab未初始化的判断，仅初始状态下设置默认值，避免循环更新：

const Tab = ({ title, defaultTab }) => {
  const [activeTab, toggleTab] = useTab();

  useEffect(() => {
    // 仅当activeTab未赋值、且当前Tab为默认Tab时才设置初始值
    if (defaultTab && !activeTab) {
      toggleTab(title);
    }
  }, [defaultTab, title, activeTab, toggleTab]);

  return (
    <div
      className={(activeTab === title ? 'text-blue-600' : 'text-gray-900')}
      onClick={() => {
        toggleTab(title);
      }}
    >
      {title}
    </div>
  );
};

3. 增加TabContainer校验逻辑 #

遍历子组件校验defaultTab数量，满足必须存在一个默认Tab的要求：

const TabContainer = ({ children }) => {
  // 统计带defaultTab属性的Tab数量
  const defaultTabCount = React.Children.toArray(children).reduce((count, child) => {
    if (React.isValidElement(child) && child.props.defaultTab) {
      return count + 1;
    }
    return count;
  }, 0);

  // 校验不通过抛出明确错误
  if (defaultTabCount === 0) {
    throw new Error('TabContainer 下必须存在一个带 defaultTab 属性的 Tab 组件');
  }
  if (defaultTabCount > 1) {
    throw new Error('TabContainer 下只能存在一个带 defaultTab 属性的 Tab 组件');
  }

  return <div className="tab-container">{children}</div>;
};

实现效果 #

• 初始加载时自动将带defaultTab属性的Tab的title值设为activeTab初始状态
• 后续点击任意Tab可正常切换状态，不会被默认值覆盖
• 开发阶段如果defaultTab数量不符合要求会直接抛出明确错误，降低排查成本

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