將 useRef 與舊版本的反應組件一起使用？

Question

如何將 useRef 用於使用舊 ref 回調 api 的組件？

const App = () => (
  //how to get ref of input?
  <div>
    <Input ref={r => console.log(r)} />
    <Button type="primary">Hello</Button>
  </div>
);

https://codesandbox.io/s/hello-antd-p6peq

Answer 1

也許這可以工作？

const App = () => {
  const myRef = useRef(null);

  return (
    <div>
      <Input
        ref={r => {
          myRef.current = r;
        }}
      />
      <Button type="primary">Hello</Button>
    </div>
  );
};

Answer 2

你不能有一個useRef ？？？ 這是一個功能組件

const App = () => {
  const inputRef = useRef(null);

  // console.log(inputRef.current) //  => <Input />
  return (
    <div>
      <Input ref={inputRef} />
      <Button type="primary">Hello</Button>
    </div>
  );
};