使用钩子的React-Popper +自定义组件

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