如何将 React.useState() 与 React.forwardRef<> 一起使用？

Question

我试图为我正在开发的网站编写一个自定义手风琴，但遇到了问题。如何在 ReactforwardRef 组件中使用 React useState() 钩子？我从 Shadcn 手风琴中获取了一些代码，并尝试对其进行调整，但对于我来说，将图标从“+”更改为“-”我发现我应该使用 React hooks。现在由于某种原因它不允许我使用它。任何帮助将不胜感激。

const AccordionTrigger = React.forwardRef<
    React.ElementRef<typeof AccordionPrimitive.Trigger>,
    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
    const [isCollapsed, setIsCollapsed] = React.useState([])

    < AccordionPrimitive.Header className = "flex" >
        <AccordionPrimitive.Trigger
            onClick={setIsCollapsed(!isCollapsed)}
            ref={ref}
            className={cn(
                "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
                className
            )}
            {...props}
        >
            {children}
            {isCollapsed ? <PlusIcon /> : <Minus />}
        </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header >
))

如果我将鼠标悬停在代码上，则会收到以下错误：

1. 期待表达。
2. 运算符“<' cannot be applied to types '[never[], Dispatch>]”和“ForwardRefExoticComponent”。

VSC 正在突出显示错误

我尝试过在网上寻找解决方案，但没有遇到。我也尝试过转移到不同的功能，但效果不佳。 我想实现以下结果：当用户单击手风琴项目时，图标从“+”变为“-”。

Answer 1

你会笑的。

<

后面有一个空格。 它认为你的意思是“小于”。