reactjs - react-popper 组件钩子返回“TypeError：Object（...）不是函数”

Question

我只是想在 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”以及其他信息很少

Answer 1

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

包.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