4

我是初学者，想了解一下react-popper。在他们的github 上，这是示例代码：

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

这是因为它应该在那里工作吗？Example我不确定我是否理解如何使用此代码，如果我将这个组件导入/使用到我自己的父组件中会是什么样子；我需要通过refs吗？怎么会这样？如果有人能给我这个代码的工作示例，那就太好了，我只想看看如何使用它。

4

2 回答 2

5

我猜你的目标是类似工具提示的功能。这是你想要达到的目标吗？

请记住，react-popper 具有低级 API。它是一个位置引擎而不是工具提示库。通过使用它，您必须自己实现显示 Popper 的逻辑。例如，您可以有一个变量shouldShowElement并触发对此的更改

  ...
  <Manager>
    <Reference>
      {({ ref }) => (
        <button
          type="button"
          ref={ref}
          onMouseEnter={() => {
            /* [[SOME CODE TO SET shouldShowElement TO TRUE]] */
          }}
          onMouseLeave={() => {
            /* [[SOME CODE TO SET shouldShowElement TO FALSE]] */
          }}
        >
          Reference element
        </button>
      )}
    </Reference>
    {shouldShowElement ? (
      <Popper placement="right">
        {({ ref, style, placement, arrowProps }) => (
          <div ref={ref} style={style} data-placement={placement}>
            Popper element
            <div ref={arrowProps.ref} style={arrowProps.style} />
          </div>
        )}
      </Popper>
    ) : null}
  </Manager>
  ...

如果你想要一个更高级的 API，你可以使用react-tippy 或react-popper-tooltip

于 2019-03-29T11:04:42.970 回答
3

不要太在意渲染道具。在大多数情况下，您不需要修改它们。

请记住，

  • refrender prop fromReference应该附加到参考元素（你的项目附在你的 popper 上）。
  • refrender prop fromPopper应该附加在 popper 上（您的工具提示或其他）。

stylerender prop 用于页面上placement的地理位置。

在简历中，此示例将呈现一个带有箭头的弹出按钮，<div>其中包含"Popper element".

于 2019-03-28T16:56:10.320 回答