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

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>
    </>
  );
};

在storybook中使用此组件失败，并显示"TypeError: Object(...) is not a function“以及很少的其他信息

Answer 1

Storybook通过react-popper-tooltip使用了一个古老的react-popper版本。您可以通过将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