useCollapse 不可调用 |类型 'typeof import ("home/.../node_modules/react-collapsed/dist/index")' 没有调用签名

Question

我正在尝试使用 recat-collapse 组件，但抛出此错误：

This expression is not callable.
  Type 'typeof import("/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/react-collapsed/dist/index")' has no call signatures.

对于此代码：

import { useState } from 'react';
import useCollapse from 'react-collapsed';

export function Collapsible() {
    
    const [isExpanded, setExpanded] = useState(false)
    const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded })
return (
    <div>
      <button
        {...getToggleProps({
          onClick: () => setExpanded((prevExpanded) => !prevExpanded),
        })}
      >
        {isExpanded ? 'Collapse' : 'Expand'}
      </button>
      <section {...getCollapseProps()}>Collapsed content</section>
    </div>
    );
}

问题是我很确定（稳定！）包确实有一个调用签名，如下所示。

declare function useCollapse({ duration, easing, onTransitionStateChange: propOnTransitionStateChange, isExpanded: configIsExpanded, defaultExpanded, hasDisabledAnimation, id, ...initialConfig }?: UseCollapseInput): {
    isExpanded: boolean;
    setExpanded: (update: boolean | ((value: boolean) => boolean)) => void;
    getToggleProps<Args extends {
        [k: string]: unknown;
        onClick?: react.MouseEventHandler<Element> | undefined;
        disabled?: boolean | undefined;
    }, RefKey extends string | undefined = "ref">(args?: (Args & {
        /**
         * Sets the key of the prop that the component uses for ref assignment
         * @default 'ref'
         */
        refKey?: RefKey | undefined;
    }) | undefined): { [K in RefKey extends string ? RefKey : "ref"]: AssignableRef<any>; } & {
        onClick: React.MouseEventHandler;
        id: string;
        'aria-controls': string;
        'aria-expanded'?: boolean | undefined;
        type?: "button" | undefined;
        disabled?: boolean | undefined;
        'aria-disabled'?: boolean | undefined;
        role?: "button" | undefined;
        tabIndex?: number | undefined;
    };
    getCollapseProps<Args_1 extends {
        [k: string]: unknown;
        style?: CSSProperties | undefined;
    }, RefKey_1 extends string | undefined = "ref">(args?: (Args_1 & {
        /**
         * Sets the key of the prop that the component uses for ref assignment
         * @default 'ref'
         */
        refKey?: RefKey_1 | undefined;
    }) | undefined): { [K_1 in RefKey_1 extends string ? RefKey_1 : "ref"]: AssignableRef<any>; } & {
        id: string;
        'aria-hidden': boolean;
        role: string;
        style: CSSProperties;
    };
};

现在我不知道出了什么问题。

当我将其更改为

const { getCollapseProps, getToggleProps } = useCollapse.useCollapse({ isExpanded })

错误实际上消失了，但是当通过yarn run dev在本地运行网站时，控制台中仍然存在（就像更改之前一样）此错误：

Uncaught SyntaxError: The requested module 'http://localhost:5173/bielefeld-cebitec/node_modules/.vite/deps/react-collapsed.js?v=55d3c6be' doesn't provide an export named: 'default'

Answer 1

当我看到文档时，我可以看到名为export the

useCollapse

钩子的包（v4.1.2）。

import { useCollapse } from 'react-collapsed'