Next.js项目中HeadlessUI Transition仅在Firefox报错求助

问题分析 #

你在Next.js项目中使用Tailwind+HeadlessUI时，仅Firefox会抛出<Transition />组件缺少show={true | false}属性的运行时错误，Chrome无异常。核心原因是Firefox严格执行React组件的必填属性校验，而你的代码未给Transition绑定控制其显示/隐藏的状态值。

修复代码 #

将Menu组件的内部open状态绑定到Transition的show属性即可解决问题：

<Menu as="div" className="z-50">
  {({ open }) => (
    <>
      <Menu.Button className="flex items-center h-full">
        <>
          {user?.displayName && (
            <span className="pl-2">{user.displayName}</span>
          )}
          <UserCircleIcon
              className="w-10 h-10 p-2"
              aria-label="account options"
          />
        </>
      </Menu.Button>
      <Transition
        show={open} // 绑定Menu的展开状态到Transition的show属性
        as={React.Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="absolute z-30 flex flex-col justify-start w-auto mt-4 origin-top-right rounded-md shadow-lg right-4 menu-items ring-1 ring-black ring-opacity-5 focus:outline-none bg-primary-background">
          {user ? (
            <>
              <Menu.Item>
                {({ active }) => (
                  <MyLink href="/account" active={active}>
                    Account settings
                  </MyLink>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <MyButton onClick={handleSignOut} active={active}>
                    Logout
                  </MyButton>
                )}
              </Menu.Item>
            </>
          ) : (
            <>
              <Menu.Item>
                {({ active }) => (
                  <MyLink href="/login" active={active}>
                    Sign In
                  </MyLink>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <MyLink href="/signup" active={active}>
                    Create Account
                  </MyLink>
                )}
              </Menu.Item>
            </>
          )}
        </Menu.Items>
      </Transition>
    </>
  )}
</Menu>

关键说明 #

• HeadlessUI的<Transition />组件必须通过show属性接收布尔值来控制过渡动画的触发，这是组件的必填项。
• Chrome对缺失必填属性有一定容错，但Firefox严格遵循React的属性校验规则，因此仅在Firefox中报错。
• 通过解构Menu组件提供的open状态（该状态由Menu内部管理，对应菜单的展开/收起状态），将其赋值给Transition的show属性，既满足组件的属性要求，又能让Transition正确感知菜单状态变化，触发对应的过渡动画。

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