新增Headless UI组件后出现React Invalid hook call错误如何解决

你提供的HeroImage组件本身没有违反Hook使用规则的写法，问题可从以下两个场景排查修复：

1. 组件调用方式错误 #

新手最常见的错误是没有以JSX标签形式调用组件：

• 错误写法：直接作为普通函数执行 const content = HeroImage()
• 错误写法2：在事件回调、副作用函数等非组件渲染上下文内调用该组件，比如：

// 错误示例
useEffect(() => {
  render(<HeroImage />, domNode)
}, [])
// 或者
const handleOpen = () => {
  return <HeroImage />
}

修复方法： #

仅在父组件的render返回值里以标签形式调用：

// 正确写法
const App = () => {
  return (
    <div>
      <HeroImage />
    </div>
  )
}

2. @headlessui/react版本与React 17不兼容 #

你使用的React版本为17.0.2，而@headlessui/react v2及以上版本仅支持React 18+，版本不匹配会导致内部Hook调用上下文错误触发报错。

修复方法： #

降级安装适配React 17的版本即可：

npm i @headlessui/react@1.7.17
# 或使用yarn
yarn add @headlessui/react@1.7.17

快速验证方式 #

暂时注释HeroImage组件内所有Popover、Transition相关代码，仅返回静态DOM结构，如果不再报错，即可确定为版本兼容问题，按上述方法降级依赖即可。

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