react-popper 组件钩子返回“TypeError: Object(...) is not a function”

问题描述

我只是想在 react-popper 的文档中获取示例的工作版本 这就是我几乎逐字使用的内容。唯一的主要区别是我需要能够提供任何类型的组件作为道具来替换打开弹出框的按钮

import { usePopper } from 'react-popper';

const Example = () => {
  const [referenceElement,setReferenceElement] = useState(null);
  const [popperElement,setPopperElement] = useState(null);
  const [arrowElement,setArrowElement] = useState(null);
  const { styles,attributes } = usePopper(referenceElement,popperElement,{
    modifiers: [{ name: 'arrow',options: { element: arrowElement } }],});

  return (
    <>
      <button type="button" ref={setReferenceElement}>
        Reference element
      </button>

      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
        Popper element
        <div ref={setArrowElement} style={styles.arrow} />
      </div>
    </>
  );
};

在故事书中使用此组件失败，并显示“TypeError: Object(...) is not a function”和很少的其他信息

解决方法

Storybook 通过 react-popper 使用古老版本的 react-popper-tooltip。您可以通过将 react-popper-2 别名为最新的 react-popper 来修复它。

package.json：

{
  "dependencies": {
    "react-popper": "^2.2.5","react-popper-2": "npm:react-popper@^2.2.5",}
}

参考：https://github.com/storybookjs/storybook/issues/10982#issuecomment-642518186