Javascript 如何将react popper与渲染道具一起使用

我是一个初学者，试图理解

react popper

。在其上，以下是示例代码：

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>
);

从'react Popper'导入{Manager，Reference，Popper}；
常量示例=（）=>(
{（{ref}）=>(
参考元素
)}
{（{ref，style，placement，arrowProps}）=>(
波普尔元件
)}
);

---

这就是它应该起作用的地方吗？我不确定我是否理解如何使用此代码，如果我将此

示例
组件导入/使用到我自己的父组件中会是什么样子；我需要通过
refs
？为什么呢如果有人能给我一个这段代码的工作示例，那就太好了，我只是想看看如何利用这段代码。
不要为渲染道具操心太多。在大多数情况下，您不需要修改它们

请记住


ref
来自
Reference
的渲染道具应附加到
参考元素（您的物品，该物品附在提升器上）
ref
从
Popper
渲染道具应连接到Popper上
（你的工具提示或任何东西）

style
和
placement
render prop用于页面上的地理位置

在resume中，此示例将呈现一个带有箭头的弹出按钮
，其中包含
“Popper元素”
 我猜您的目标是实现类似工具提示的功能。这是你想要达到的吗

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

。。。
{（{ref}）=>(
{
/*[[要将shouldShowElement设置为TRUE的某些代码]]*/
}}
onMouseLeave={（）=>{
/*[[要将shouldShowElement设置为FALSE的某些代码]]*/
}}
>
参考元素
)}
{shouldShowElement(
{（{ref，style，placement，arrowProps}）=>(
波普尔元件
)}
)：null}
...

如果您想要更高级的API，可以使用
或者
再次非常感谢。您能否给出一个简单的示例，说明这在实践/代码中是什么样子的？我的水平是相当基本的，我被卡住了，不知道如何把这些联系起来。不幸的是，你给出的例子几乎是可能存在的最简单的例子。唯一可选的“东西”是
箭头道具及其渲染
。谢谢！但是我如何使用这个代码呢？就像从“/Example.js”导入示例一样//然后在我的渲染中：
？不，您没有得到它。此代码不能与导出一起重复使用。当你想做点什么的时候，复制它的骨架。在
Reference
中，放置引用元素，而不是示例
按钮。在
Popper
中，放置要弹出的元素，而不是飞行文本
“Popper元素”
。