使用 React Popper 的 usePopper() 挂钩生成箭头时我缺少什么？

Question

我正在尝试遵循 Popper.js 文档中的示例，了解如何使用 usePopper 钩子实现此处找到的箭头：

https://popper.js.org/react-popper/v2/

我尝试将其放入代码框中，然后 console.log the styles.arrow 并看到它正在打印：

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

因此，我将此代码添加到我的应用程序中，该代码位于打字稿中，如下所示：

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

但是，当我在这里 console.log styles.arrow 时，它返回未定义。我感觉这里有什么问题。我声明有什么错误吗？

Answer 1

这个例子或行为没有任何问题。

正如此评论中提到的，Popper 不提供任何样式。你一定要看看造型教程