如何使用带有渲染道具的 react-popper答案

【问题标题】：How to use react-popper with render props如何使用带有渲染道具的 react-popper
【发布时间】：2019-08-19 12:47:57
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs popper.js react-popper

【解决方案1】：

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

请记住

ref 来自 Reference 的渲染道具应该附加到参考元素（您的物品附在您的 popper 上）。
ref 来自 Popper 的渲染道具应该附加在 popper 上（您的工具提示或其他）。

style 和 placement 渲染属性用于页面上的地理位置。

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

【讨论】：

再次感谢您。你能举一个最小的例子来说明这在实践中/在代码中的样子吗？我的水平非常基本，我被卡住了，不知道如何将它们连接在一起。
不幸的是，您给出的示例几乎是可能存在的最简单的示例。唯一可选的“事物”是arrowProps 及其渲染<div>。
谢谢！我将如何使用此代码？就像这样import Example from './Example.js'; //then in my render: <Example /> ?
不，你没有明白。此代码不可用于导出。当你想弹出一些东西时复制它的骨架。在Reference 中，而不是示例button，放置您的参考元素。在Popper，而不是飞行文本"Popper element"，放上你想要弹出的元素。

【解决方案2】：

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

请记住，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

【讨论】：

@Bekinass 感谢您对 API 级别的清晰了解。