如何在渲染道具中使用react-popper

时间:2019-03-28 16:41:02

标签: javascript reactjs popper.js react-popper

我是一个初学者,试图了解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吗?为何如此?如果有人可以给我这个代码的工作示例,那就太好了,我只想看看如何使用它。

2 个答案:

答案 0 :(得分:2)

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

请记住

    来自ref
  • Reference渲染道具应附加到 参考元素(您的弹出式附件所在的项目)。
  • 来自ref
  • Popper渲染道具应附加在弹出器上 (您的工具提示或其他提示)。

styleplacement渲染道具用于页面上的地理位置。

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

答案 1 :(得分:0)

我猜您的目标是提供类似于工具提示的功能。这是您要达到的目标吗?

请记住,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-tippyreact-popper-tooltip