reactjs - React-Popper + 使用 Hooks 的自定义组件

Question

我有一组不应在内部使用 react-popper 的组件。我正在尝试将它们用作react-popper的参考。我知道解决方案是使用 forwardRef，但是，我花了几个小时试图做到这一点，但没有取得很大成功。

有没有人可以为一个简单的案例提供样本？这是一个需要内部引用的简单文本框组件：应该如何重写或包装它以用作引用？

import React, { useEffect, useRef } from 'react';

const Textbox = ({
  autofocus,
  ...props
}) => {
  // handle auto-focus
  const node = useRef();
  useEffect(() => {
    if (autofocus) {
      // focus & select the whole text
      node.current.focus();
      node.current.setSelectionRange(0, 9999);
    }
  },
  // do it only once
  []);

  return (
    <input
      type="text"
      ref={node}
      {...props}
    />
  );
};