小编And*_*sta的帖子

我正在尝试遵循 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 时，它返回未定义。我感觉这里有什么问题。我声明有什么错误吗？

假设我有一个如下所示的数组：

const array = [0, 1, 2, 3, 4, 5, 6, 7]

我想要做的是迭代 .map 函数中的每 2 个对象，但它需要在我的渲染中看起来像这样（注意我使用的是 React Bootstrap）：

<Row>
<Col>array[0]</Col>
<Col>array[1]</Col>
</Row>


<Row>
<Col>array[2]</Col>
<Col>array[3]</Col>
</Row>

等等...

因此，对于每 2 个对象，它需要拥有自己的行，然后在关闭 Row 并开始新 Row 之前渲染这 2 个对象（如果它有更多元素）。

实现这一目标的最佳方法是什么？