React使用switch-case渲染组件出现Hooks调用顺序错误如何解决？

报错原因 #

你当前的写法是直接将子组件作为普通函数调用（StartFragment(props)），而非作为React组件渲染，这会导致子组件内部定义的Hooks被识别为父组件Fragment的Hooks。当你切换props.type时，父组件执行的Hooks数量会发生变化，违反了React Hooks 渲染时Hook调用顺序和数量必须完全一致 的规则，因此触发报错。

核心解决方案 #

你完全不需要将子组件的Hooks提升到父组件，只需要将调用子组件的写法改为标准JSX组件渲染即可：

export default function Fragment(props) {
    switch (props.type) {
        
        case FRAGMENT_TYPES.Start:
            return <StartFragment {...props} />;

        case FRAGMENT_TYPES.Rules:
            return <RulesFragment {...props} />;

        // 其余case省略
        
        default:    
            return null;
    } 
}

原理说明 #

用JSX语法渲染组件时，子组件的Hooks属于子组件自身的函数作用域，和父组件完全隔离。父组件只是根据type渲染不同的子组件实例，自身的Hooks调用顺序和数量永远保持固定，自然不会触发Hook顺序相关的报错。

可选优化写法 #

如果不想写冗长的switch-case逻辑，也可以用对象映射的方式简化代码：

const FRAGMENT_COMPONENT_MAP = {
  [FRAGMENT_TYPES.Start]: StartFragment,
  [FRAGMENT_TYPES.Rules]: RulesFragment,
  // 其余类型映射
}

export default function Fragment(props) {
  const Component = FRAGMENT_COMPONENT_MAP[props.type];
  return Component ? <Component {...props} /> : null;
}

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